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

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.

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"
  ]
}

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 ?

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.

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

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.

@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 (https://github.com/parcel-bundler/parcel/issues/670) but otherwise I think you should be more respectful of all the work they have done.

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 😇

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>

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