Error while rendering map with mapbox-gl: "_typeof is not defined" #1128

dolbyzerr · 2018-04-03T05:27:45Z

This a 🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
  "dependencies": {
    "mapbox-gl": "^0.44.1",
    "parcel-bundler": "^1.7.0"
  }
}

npx parcel index.html

🤔 Expected Behavior

A map should be rendered.

😯 Current Behavior

Grey area is rendered:

The error in console:
Uncaught ReferenceError: _typeof is not defined

💁 Possible Solution

As far as I understood from the error and this issue from mapbox mapbox/mapbox-gl-js#3422 it happens because parcel transpiling mapbox file that already being transpiled. Is there any way to alter that behaviour?

💻 Code Sample

<html>
<head>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map' style='width: 400px; height: 300px;'></div>
  <script src="./index.js"></script>
</body>
</html>

import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = 'pk.eyJ1IjoiZG9sYnl6ZXJyIiwiYSI6InhIS25oN0EifQ.QQrwwFUZu6trJNjGsrpTFQ'
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9'
});

🌍 Your Environment

Software	Version(s)
Parcel	1.7.0
Node	v8.6.0
npm	5.6.0
Operating System	macOS 10.13.4

The text was updated successfully, but these errors were encountered:

dcposch · 2018-04-29T12:39:00Z

i'm running into the same problem.

my guess is that it's related to Web Workers. the _typeof is not defined errors all occur in Web Worker contexts, which are loaded from blob URIs. the blobs reference _typeof but do not define it.

safareli · 2018-05-03T20:25:29Z

you might wanna just "disable" babel see #509 (comment)

davidnagli · 2018-07-02T18:26:33Z

Related: #670
The root cause of this issue is that we don't support web workers. Anybody willing to contribute this feature? How would we go about doing this?

Running into this exact issue for a work project and really need a fix 😇

tobinbradley · 2018-07-04T23:14:15Z

Here's my "fun with Babel" contribution.

Fiddling with my .babelrc I discovered limiting it to modern browsers worked.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 Firefox versions, last 2 Chrome versions, last 2 Edge versions, last 2 Safari versions"
      }
    }]
  ]
}

After a bunch of fiddling, it seems Babel's transformation for IE and Android Browser are causing the problem. If I use the browser string "defaults, not ie <999, not Android < 999" to exclude those browsers, Bob's your uncle. Put either of those two browsers back in the pool, _typeof is not defined error.

But, if I run the Mapbox GL JS library through the Babel command line (Babel CLI 6.26.0, adds 2kb to the file) and then link to it directly in the example at the top, it works fine (note no import is going on here).

<script src="mapbox-babeled.js"></script>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZG9sYnl6ZXJyIiwiYSI6InhIS25oN0EifQ.QQrwwFUZu6trJNjGsrpTFQ'
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9'
    });
  </script>

So, it looks like it's something with Babel combined with the import bundler, but only when Babel is correcting for those browsers. I guess.

jotasolano · 2019-03-10T18:19:27Z

I tried @tobinbradley's solution (changing the .babelrc browsers, not the second option) and it did not work for me. Maybe something has changed between there and now, but I get the same error as in the original bug. Any other ideas about how to deal with this?

MoritzStefaner · 2019-03-22T12:27:38Z

I can confirm I have the same issue here using

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.12.3"
  },
  "dependencies": {
    "mapbox-gl": "^0.51.0",
    "react-mapbox-gl": "^4.2.0"
  }

Any suggestions, ideas, …?

jotasolano · 2019-03-22T13:25:54Z

I ran out of ideas. I ended up using another bundler/boilerplate solution much to my chagrin. It looks to me like this won't be fixed until Parcel 2 arrives

cyrilchapon · 2019-04-03T09:19:04Z

Confirmed same issue with react-map-gl and even raw mapbox-gl...

AwesomeChap · 2019-05-30T08:32:02Z

Here's my "fun with Babel" contribution.

Fiddling with my .babelrc I discovered limiting it to modern browsers worked.
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 Firefox versions, last 2 Chrome versions, last 2 Edge versions, last 2 Safari versions"
      }
    }]
  ]
}
After a bunch of fiddling, it seems Babel's transformation for IE and Android Browser are causing the problem. If I use the browser string "defaults, not ie <999, not Android < 999" to exclude those browsers, Bob's your uncle. Put either of those two browsers back in the pool, _typeof is not defined error.

But, if I run the Mapbox GL JS library through the Babel command line (Babel CLI 6.26.0, adds 2kb to the file) and then link to it directly in the example at the top, it works fine (note no import is going on here).
<script src="mapbox-babeled.js"></script>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZG9sYnl6ZXJyIiwiYSI6InhIS25oN0EifQ.QQrwwFUZu6trJNjGsrpTFQ'
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9'
    });
  </script>
So, it looks like it's something with Babel combined with the import bundler, but only when Babel is correcting for those browsers. I guess.

May be you should try excluding /mapbox-gl from transpiling. It worked for me. My final .babelrc looks like this

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": "last 2 Firefox versions, last 2 Chrome versions, last 2 Edge versions, last 2 Safari versions"
        },
        "exclude" : ["/mapbox-gl"]
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

lrjbrual · 2019-06-18T06:41:39Z

I have the same issue, still can't find any good solution.

vemundeldegard · 2019-11-16T11:16:15Z

I cannot find a fix for this. I have tried all of the above in .babelrc and nothing works.

cyrilchapon · 2019-12-06T06:30:54Z

Please for god sake. "Just don't transpile the module lol" is not an answer at all. Some are actually using it in production with facing customers.

Everything about Babel here is not about fixing the issue; but avoiding the issue, making somehow Babel avoid mapbox transpilation in some context.

We need an answer. Doesn't mapbox work in certain browser contexts because of webworkers ? Fine, please we figure it out and spell it, list it. Shouldn't we ?

jotasolano · 2019-12-06T15:33:24Z

@cyrilchapon while I understand your frustration, this is not the right tone. This is open source software, you're not paying a dime for Parcel and the root issue has been identified and open. I'm sure the core devs would welcome your contribution (#670) but otherwise I think you should be more respectful of all the work they have done.

cyrilchapon · 2019-12-11T06:49:05Z

@jotasolano was I revendicative on my previous answer ? Or disrespectful against contributors ? Or even acting like a "customer" ? I don't agree actually. I'm pretty aware this is open source software, and I did not even mention the fact this issue not being tackled.

I was complaining about bad issue triaging and commenting. "Just don't transpile" is not a clever answer, and that's all I'm saying.

Everyone coming to this issue will now know this issue is being tackled, thanks to the link you posted. Please notice no-one could guess that before your answer. In that sense, this issue moved on a little bit; and that's my way of contributing.

niceone · 2019-12-20T16:12:01Z

I cannot find a fix for this. I have tried all of the above in .babelrc and nothing works.

Excluding mapbox-gl in .babelrc did the trick for me as suggested above, but only after forcing Parcel to rebuild everything. Try --no-cache on parcel.

jotasolano · 2019-12-20T17:29:01Z

@jotasolano was I revendicative on my previous answer ? Or disrespectful against contributors ? Or even acting like a "customer" ? I don't agree actually. I'm pretty aware this is open source software, and I did not even mention the fact this issue not being tackled.

I was complaining about bad issue triaging and commenting. "Just don't transpile" is not a clever answer, and that's all I'm saying.

Everyone coming to this issue will now know this issue is being tackled, thanks to the link you posted. Please notice no-one could guess that before your answer. In that sense, this issue moved on a little bit; and that's my way of contributing.

@cyrilchapon If you scroll up you'll see that the issue I referenced was posted pretty early (comment 4) #1128 (comment) I just re-referenced for you.

raxod502 · 2020-02-15T18:52:48Z

Is there a workaround to this issue that doesn't involve dropping support for most browsers? The solution suggested #1128 (comment) works but not if I set the browser list to defaults.

Is Parcel ignoring the excludes list? If so, why?

jordymeow · 2020-04-29T14:54:07Z

I am encountering the same issue but using Babel 7 (@babel/...). The solutions mentioned above, therefore, don't work for me. It seems the options for env have changed. I spent a lot of time trying to find a solution and understanding the extremely obscure Babel documentation, but to be honest, I failed. And can't wait to be able to code again. Surely there is a better way than switching back to Webpack? :(

Would love to have your ideas. I can't be the only one using Babel 7, Parcel, and MapBox.

agustinmulet · 2020-06-07T02:14:54Z

I got to fix this error using Babel 7, and react-map-gl
What I did was install Babel 7 with yarn add -D @babel/core @babel/cli and then add a .babelrc file with this:

{
    "presets": [
        ["@babel/env", {
        "targets": {
            "browsers": [
            ">2%",
            "last 1 Edge version",
            "last 2 Safari version",
            "last 1 Firefox version"
            ]
        },
        "loose": true
        }]
    ]
}

According to the Babel docs, the "loose": true does the trick, excluding typeof-symbol which seems to be causing this issue.

willbarkoff · 2020-11-07T02:00:08Z

Has anyone been able to solve this with TypeScript (no babel)?

babak-bekhrad · 2020-11-07T18:38:13Z

I have the same issue. but for fixing this bug, I used the Mapbox CDN instead of module bundler and finally the map area is rendered without Grey area .
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

markusand · 2020-12-13T11:09:34Z

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 Firefox versions, last 2 Chrome versions, last 2 Edge versions, last 2 Safari versions"
      }
    }]
  ]
}

Following @tobinbradley solution, I found that just creating a .browserslist and completely excluding IE works for me.

defaults
not IE > 0

I'm using new mapbox-gl 2.0.0

devongovett · 2021-07-12T04:11:25Z

Appears to work correctly in Parcel 2 nightly.

dolbyzerr changed the title ~~Error while rendering map with mapbox-gl: _typeof is not defined~~ Error while rendering map with mapbox-gl: "_typeof is not defined" Apr 3, 2018

DeMoorJasper added the 🐛 Bug label Apr 3, 2018

dcposch mentioned this issue Apr 29, 2018

_typeof function in generated code calls itself before it is defined (T7149) babel/babel#4125

Closed

davidnagli added this to To Do in Bugs via automation Jul 2, 2018

devongovett mentioned this issue Dec 3, 2018

Parcel 2: Babel Transformer #2350

Merged

mischnic added the ✨ Parcel 2 label Feb 24, 2019

cyrilchapon mentioned this issue Apr 10, 2019

Discuss .babelrc detection, engines field, etc. #13

Closed

palamago mentioned this issue Aug 5, 2019

[core] Exlude mapbox-gl from babel transpiling Datawheel/canon#635

Closed

gavinsharp mentioned this issue Feb 16, 2020

Misc. config tweaks leibovic/baby-in-tow#27

Open

rmader mentioned this issue Mar 11, 2021

WIP: webpack: IE11 fixes and workarounds liqd/a4-meinberlin#3481

Closed

devongovett closed this as completed Jul 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error while rendering map with mapbox-gl: "_typeof is not defined" #1128

Error while rendering map with mapbox-gl: "_typeof is not defined" #1128

dolbyzerr commented Apr 3, 2018

dcposch commented Apr 29, 2018 •

edited

safareli commented May 3, 2018

davidnagli commented Jul 2, 2018

tobinbradley commented Jul 4, 2018

jotasolano commented Mar 10, 2019

MoritzStefaner commented Mar 22, 2019

jotasolano commented Mar 22, 2019

cyrilchapon commented Apr 3, 2019

AwesomeChap commented May 30, 2019 •

edited

lrjbrual commented Jun 18, 2019

vemundeldegard commented Nov 16, 2019

cyrilchapon commented Dec 6, 2019

jotasolano commented Dec 6, 2019

cyrilchapon commented Dec 11, 2019

niceone commented Dec 20, 2019

jotasolano commented Dec 20, 2019 •

edited

raxod502 commented Feb 15, 2020

jordymeow commented Apr 29, 2020

agustinmulet commented Jun 7, 2020

willbarkoff commented Nov 7, 2020

babak-bekhrad commented Nov 7, 2020 •

edited

markusand commented Dec 13, 2020

devongovett commented Jul 12, 2021

Error while rendering map with mapbox-gl: "_typeof is not defined" #1128

Error while rendering map with mapbox-gl: "_typeof is not defined" #1128

Comments

dolbyzerr commented Apr 3, 2018

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

💻 Code Sample

🌍 Your Environment

dcposch commented Apr 29, 2018 • edited

safareli commented May 3, 2018

davidnagli commented Jul 2, 2018

tobinbradley commented Jul 4, 2018

jotasolano commented Mar 10, 2019

MoritzStefaner commented Mar 22, 2019

jotasolano commented Mar 22, 2019

cyrilchapon commented Apr 3, 2019

AwesomeChap commented May 30, 2019 • edited

lrjbrual commented Jun 18, 2019

vemundeldegard commented Nov 16, 2019

cyrilchapon commented Dec 6, 2019

jotasolano commented Dec 6, 2019

cyrilchapon commented Dec 11, 2019

niceone commented Dec 20, 2019

jotasolano commented Dec 20, 2019 • edited

raxod502 commented Feb 15, 2020

jordymeow commented Apr 29, 2020

agustinmulet commented Jun 7, 2020

willbarkoff commented Nov 7, 2020

babak-bekhrad commented Nov 7, 2020 • edited

markusand commented Dec 13, 2020

devongovett commented Jul 12, 2021

dcposch commented Apr 29, 2018 •

edited

AwesomeChap commented May 30, 2019 •

edited

jotasolano commented Dec 20, 2019 •

edited

babak-bekhrad commented Nov 7, 2020 •

edited