Mapbox-gl-js: Uncaught ReferenceError: _typeof is not defined

[camertron]

mapbox-gl-js version: 1.1.1

browser: Brave (Chromium 75.0.3770.100), Firefox 68.0.1

Steps to Trigger Behavior

webpack ^4.37.0
@babel/core: ^7.5.5
@babel/plugin-proposal-class-properties: ^7.5.5
@babel/plugin-proposal-export-default-from: ^7.5.2
@babel/plugin-proposal-object-rest-spread: ^7.5.5
@babel/plugin-syntax-dynamic-import: ^7.2.0
@babel/plugin-transform-shorthand-properties: ^7.2.0
@babel/preset-env: ^7.5.5
@babel/preset-react: ^7.0.0

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 5%", "last 2 versions", "ie 11"]
        },
        "forceAllTransforms": false,
        "loose": true,
        "exclude": ["transform-typeof-symbol"],
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "env": {
    "test": {
      "presets": [["@babel/preset-env"], "@babel/preset-react"],
      "plugins": [
        [
          "@babel/proposal-class-properties",
          {
            "spec": true
          }
        ]
      ]
    }
  },
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/proposal-object-rest-spread",
    "@babel/transform-shorthand-properties",
    "@babel/proposal-class-properties",
    "@babel/plugin-proposal-export-default-from"
  ]
}

Link to Demonstration

Expected Behavior

I expect the map to load.

Actual Behavior

Console contains 4 errors that say "Uncaught ReferenceError: _typeof is not defined"

I have googled around for answers and have found several issues filed against this repo with identical symptoms. I've tried all the solutions with absolutely no success. Any ideas? I'm at my absolute wit's end.

[mourner]

Can you try excluding mapbox-gl from transpilation by Babel? If you're sure this doesn't work, we'd appreciate a full, self-contained reproduction of the issue, e.g. using a separate repository or a gist.

[Liquid-Zhangliquan]

hello,I have the same problem.

it looks like 'web worker' doesn`t work ?

[mourner]

@Liquid-Zhangliquan this is because the mapbox-gl-js bundle (which is already transpiled) is being transpiled by Babel again in your configuration. You should exclude it from transpilation.

[camertron]

@mourner the weird thing is all my node_modules are supposedly excluded from Babel transpilation, yet somehow I still see this problem. I tried every fix I could find online for excluding files from Babel but nothing worked. I finally ended up solving the problem by using a separate loader just for mapbox-gl. In my webpack config I now have:

environment.loaders.insert(
  'mapbox-loader',
  {
    test: /mapbox.*\.js$/,
    use: 'script-loader'
  }
);

Then in my react component I have

import 'mapbox-gl'

It's not ideal because the script loader evaluates the mapbox code directly in the component, but I couldn't fix it any other way :(

[mourner]

Can you try excluding mapbox-gl from transpilation by Babel? If you're sure this doesn't work, we'd appreciate a full, self-contained reproduction of the issue, e.g. using a separate repository or a gist.

Have to close the issue because it appears on the app config side, not a mapbox-gl-js fault, and there's no reproducible test case to prove otherwise.

[yumindeckard]

I am so disappointed.

Just google the error message and mapbox, tons of results would be displayed and yet, there is no fix. And you don't bother to test it.

You don't need information. You need to care.

I am seriously concerned and disturbed.

[camertron]

@yumindeckard I know it's frustrating to wrestle with issues like this, but please remember the people who work on open-source projects like mapbox-gl often do so in their free time and without any compensation. The best thing to do to get this issue solved would be to create and share a reproducible test case. I would do so myself but I'm also time-limited right now. If you have time to help, please pitch in.

[dchersey]

I had the same issue -- then saw this related issue with additional solutions.
I am using react-rails, so adding

environment.loaders.delete('nodeModules')

to my config/webpack/environment.js solved the problem.

I expect this would also work for non-rails webpack.config.js.

I had tried using script-loader as suggested above, and it got me past the typeof issues but then I received an error calling

new mapboxgl.Map({
      container: this.mapContainer,
...

-- said it was not a constructor. Removing the nodeModules from the webpack loaders seems like a good idea anyway, and solved this for me.

[jordymeow]

I am encountering the same issue. Using Parcel and Babel 7. It seems like none of the libraries wants really to give us a proper solution :(

I have tried to exclude MapBox from the transpilation, but the Babel's doc is terribly obscure about how to do this. Is there an alternative way?

You guys, developing MapBox (and thank you for this), aren't you using Babel 7? How are you doing it? Of course, I can make it work with Babel 6, or with WebPack + workarounds, but I would like to feel like I am in 2020.

[gooin]

babel7 see: https://github.com/mapbox/mapbox-gl-js/issues/3422