Mapbox-gl-js: _typeof is not defined

[bensleveritt]

Getting a _typeof is not defined error when using babel-preset-es2015 in Webpack. Not using the preset removes the error.

v0.26.0:

Steps to Trigger Behavior

1. Set up Webpack, Babel, Mapbox-gl as per my repo.
2. npm start to start webpack-dev-server.
3. Observe console log errors:

Uncaught ReferenceError: _typeof is not defined
exports.clone @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
StyleDeclaration @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
setPaintProperty @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
set @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
StyleLayer @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
FillStyleLayer @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
StyleLayer.create @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
t @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
setLayers @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1
Actor.receive @ blob:http://localhost:3000/c231e9bd-0ca6-4a10-8b58-eecdc79fe25d:1

Expected Behavior

Basic map is displayed over beige background.

Actual Behavior

Beige background is displayed.

[jfirebaugh]

Looks like a bug in babel (https://github.com/babel/babel/issues/4125, not sure why this is closed). The dist mapbox-gl.js file does not use ES2015, please exclude it from transpilation.

[bensleveritt]

I've excluded it, thanks for the help.

Edit (to help people in the future):
Add exclude: /(node_modules)/ to the babel loader definition in webpack.config.

[rotoglup]

Add exclude: /(node_modules)/ to the babel loader definition in webpack.config.

FWIW, I've got bitten by this whole exclusion, better exclude only mapbox-gl with exclude: /mapbox-gl/

[caesarsol]

Hitting the same error here, it was hard to find because one minified becomes s is not a function...

Waiting for the babel issue, in the meantime exclude: /mapbox-gl/ is the way.

[digitalkaoz]

anyone has an idea how to solve it without excluding it from babeling? https://github.com/babel/babel/issues/4125 is closed and locked without a resolution CRA solved it somehow by excluding transform-typeof-symbol but it wont work with react-static (which uses babel7) when excluding exclude: ['@babel/plugin-transform-typeof-symbol']

so im more then confused...excluding is the worst option, cant it be solved in mapboxgl?

[cyrilchapon]

This is still an issue using

• mapbox-gl 0.53.1
• react-map-gl 4.1.1
• parcel-bundler 1.12.3

Getting

Uncaught ReferenceError: _typeof is not defined

From webworker

[fabiobarboza7]

It sometimes happens when you are trying to read some javascript before load the js file.

[CharlieMartell]

Seeing this aswell on Chrome 76 [email protected]

[CharlieMartell]

Worked around this by adding exclude: /mapbox-gl/ into babel-loader webpack rules

[KevinColemanInc]

For rails devs scratching their heads at this, I found this fixed the problem:
in environment.js

environment.loaders.delete('nodeModules')

related content:
https://github.com/rails/webpacker/blob/54c3ca9245e9ee330f8ca63b447c202290f7b624/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

[jordymeow]

Was anybody able to do it using Parcel, and Babel 7? @cyrilchapon, did you find a way? It would be awesome to find a solution to this.

[cyrilchapon]

@jordymeow nah I just gave up on parcel.
Found out that this 0-config stuff is just basically not suitable for complex projects involving complex libs like mapbox

[willallendev]

I created my project with create-react-app, so I've got no direct access to the webpack.config file.

I did the following:

1. Add react-app-rewired to my project in order to override webpack.config in node_modules/react-scripts/config. This will be true if you create your project the same way as I did (https://github.com/timarney/react-app-rewired) make sure to follow all the instructions and modify the scripts in your package.json
2. Add customize-cra to my project (https://github.com/arackaf/customize-cra#with-webpack) and follow the instructions
3. In your newly created config-overrides.js file use the "babelExclude" helper function from customize-cra package in order to exclude mapbox-gl from babel loader (make sure to write the path correctly, you may want to use "path" package).
4. This might do the trick for you

however depending on the structure use in your webpack.config files in node_modules/react-scripts/config the helper function "babelExclude" might not be able to reference your babel loader definition and you will get an error like “cannot set property exclude of undefined” if that happens you will have to do what I did to make it work, which is checking your webpack.config files and figuring out where in the structure you will be able to write/override the exclude sentence (see my config-overrides.js below).

const path = require('path');

const babelExclude = (exclude, config) => {
  config.module.rules[2].oneOf[2].use[1].options.exclude = exclude;
  return config;
};

module.exports = function override(config) {
  config = babelExclude(path.resolve('node_modules/mapbox-gl'), config);
  return config;
};

My version of "react-scripts": "2.0.0" (this is the one package that defines the webpack.config file for you)

Not pretty but that did the trick for me without having to eject. You may want to remove de ^ sign in front of the version of react-scripts in your package.json. If the webpack,config changes you project might break again, or at least be aware that you will have to update config-overrides.js accordingly.

Hope it helps someone!

[zzzev]

We're using parcel & babel 7, and fixed this by narrowing the scope of browsers we include in the browserslist property of our package.json. Some of the browsers we were including were causing the transform-typeof-symbol plugin to be applied, which is what causes this (something about this plugin doesn't work properly when typeof is used inside the web worker used by mapbox).

[andrew-j-roberts]

Hey @zzzev , do you mind posting your package.json file?

I'd love to see if this solves my issue too.

[zzzev]

The browserslist part:

  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "last 3 safari versions"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

We're using parcel 1.12.4, with no explicit babel dep and no babelrc file.

[sachinpatil55]

The browserslist part:

  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "last 3 safari versions"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

We're using parcel 1.12.4, with no explicit babel dep and no babelrc file.

This solution worked for me thanks @zzzev

[daveycakes]

For rails devs scratching their heads at this, I found this fixed the problem:
in environment.js

environment.loaders.delete('nodeModules')

related content:
https://github.com/rails/webpacker/blob/54c3ca9245e9ee330f8ca63b447c202290f7b624/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

You are a wonderful human being

[Fradomati]

The browserslist part:

  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "last 3 safari versions"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

We're using parcel 1.12.4, with no explicit babel dep and no babelrc file.

This solution worked for me thanks @zzzev

Yeah, me too but, might this be a problem in the future?

[gooin]

The browserslist part:

  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "last 3 safari versions"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

We're using parcel 1.12.4, with no explicit babel dep and no babelrc file.

It works for me too. webpack version ^5.8.0 , babel verison ^7.12.8

[jswelsh]

The browserslist part:

  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "last 3 safari versions"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

We're using parcel 1.12.4, with no explicit babel dep and no babelrc file.

This worked for me

[cacheflow]

For rails devs scratching their heads at this, I found this fixed the problem:
in environment.js

environment.loaders.delete('nodeModules')

related content:
https://github.com/rails/webpacker/blob/54c3ca9245e9ee330f8ca63b447c202290f7b624/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

I ran into this same issue with another module I'm using. This fixed it!

[Sioomak]

Excluding quagga from babel-loader in webpack.mix.js fixed the issue for me: