_typeof is not defined #3422

bensleveritt · 2016-10-20T15:47:17Z

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

Set up Webpack, Babel, Mapbox-gl as per my repo.
npm start to start webpack-dev-server.
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.

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

jfirebaugh · 2016-10-20T16:27:45Z

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

bensleveritt · 2016-10-20T17:12:10Z

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 · 2018-02-19T16:15:39Z

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 · 2018-06-07T10:44:03Z

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 · 2018-10-31T11:29:04Z

anyone has an idea how to solve it without excluding it from babeling? babel/babel#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?

@javan

New `nodeModules` loader significantly change behavior. It's specified in **Breaking changes** section but description is quite small. As example, @javan have issue with `nodeModules` loader (rails#1892). Also, in my build it breaks `mapbox-gl` package (mapbox/mapbox-gl-js#3422). This PR adds more details to `CHANGELOG.md` about `nodeModules` loader and receipt to keep previous behavior.

cyrilchapon · 2019-04-10T13:35:09Z

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 · 2019-06-06T15:55:29Z

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

CharlieMartell · 2019-08-23T18:43:42Z

Seeing this aswell on Chrome 76 [email protected]

CharlieMartell · 2019-08-26T17:47:47Z

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

issue: mapbox/mapbox-gl-js#3422 caused by: embroider-build/ember-auto-import#225

KevinColemanInc · 2020-01-22T17:20:35Z

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

…er loaders More context: visgl/react-map-gl#874 lewagon/rails-templates#81 mapbox/mapbox-gl-js#3422

…er loaders Manually set height of map div to get something visible for now More context: visgl/react-map-gl#874 lewagon/rails-templates#81 mapbox/mapbox-gl-js#3422

jordymeow · 2020-04-29T15:12:46Z

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 · 2020-04-29T21:27:42Z

@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 · 2020-05-20T19:31:14Z

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

I did the following:

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
Add customize-cra to my project (https://github.com/arackaf/customize-cra#with-webpack) and follow the instructions
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).
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 · 2020-06-05T17:38:36Z

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 · 2020-06-08T21:06:33Z

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

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

zzzev · 2020-06-08T22:10:42Z

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 · 2020-06-27T20:08:58Z

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 · 2020-07-14T15:54:01Z

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 · 2020-11-07T12:19:16Z

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 · 2020-12-07T06:55:31Z

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 · 2020-12-21T16:00:30Z

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 · 2021-02-24T06:23:22Z

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 · 2021-03-19T15:44:41Z

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

jfirebaugh closed this as completed Oct 20, 2016

dolbyzerr mentioned this issue Apr 3, 2018

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

Closed

dcposch mentioned this issue Apr 29, 2018

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

Closed

ryanhamley mentioned this issue Oct 2, 2018

In create-react-app v2 initialization throws Uncaught ReferenceError: _typeof is not defined #7354

Closed

cpannwitz mentioned this issue Oct 3, 2018

CRA 2 breaks the use of mapbox-gl: Uncaught ReferenceError: _typeof is not defined facebook/create-react-app#5267

Closed

oleksii-leonov mentioned this issue Jan 16, 2019

Clarify nodeModules loader in CHANGELOG.md rails/webpacker#1893

Closed

auspex mentioned this issue Feb 15, 2019

Anyone knows how to use jstree with webpack, thanks ? vakata/jstree#1675

Closed

db0sch mentioned this issue Mar 25, 2019

Prevent Babel from transpiling node_modules packages lewagon/rails-templates#81

Merged

allthesignals mentioned this issue Apr 11, 2019

App does not transpile for IE11 NYCPlanning/labs-applicantmaps#532

Open

redterror mentioned this issue Jul 12, 2019

Uncaught ReferenceError: _typeof is not defined vakata/jstree#1717

Closed

kturney added a commit to kturney/ember-mapbox-gl that referenced this issue Oct 3, 2019

fix for issue around trying to run Babel on already transpiled mapbox-gl

e100064

issue: mapbox/mapbox-gl-js#3422 caused by: embroider-build/ember-auto-import#225

antoniojunyor mentioned this issue Nov 26, 2019

Template transpiling node modules folder astrocket/rails-template#2

Closed

Mrxpj mentioned this issue Jan 2, 2020

## mapbox-gl使用问题 NervJS/taro#3358

Closed

albertchae added a commit to rubyforgood/freeforest that referenced this issue Apr 5, 2020

Fix _typeof is not defined error by deleting nodeModules from webpack…

c478919

…er loaders More context: visgl/react-map-gl#874 lewagon/rails-templates#81 mapbox/mapbox-gl-js#3422

dchersey mentioned this issue Apr 23, 2020

Uncaught ReferenceError: _typeof is not defined #8574

Closed

This was referenced Mar 8, 2021

WIP: alternative legacy es5 build #10431

Closed

Uncaught ReferenceError: _createClass is not defined (after transpiling with Babel) #10173

Closed

giovannic mentioned this issue May 20, 2021

Time Changing Vaccine Efficacy Changes mrc-ide/nimue_js#22

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

_typeof is not defined #3422

_typeof is not defined #3422

bensleveritt commented Oct 20, 2016 •

edited

Loading

jfirebaugh commented Oct 20, 2016

bensleveritt commented Oct 20, 2016 •

edited

Loading

rotoglup commented Feb 19, 2018

caesarsol commented Jun 7, 2018

digitalkaoz commented Oct 31, 2018 •

edited

Loading

cyrilchapon commented Apr 10, 2019 •

edited

Loading

fabiobarboza7 commented Jun 6, 2019 •

edited

Loading

CharlieMartell commented Aug 23, 2019

CharlieMartell commented Aug 26, 2019

KevinColemanInc commented Jan 22, 2020

jordymeow commented Apr 29, 2020

cyrilchapon commented Apr 29, 2020

willallendev commented May 20, 2020 •

edited

Loading

zzzev commented Jun 5, 2020

andrew-j-roberts commented Jun 8, 2020

zzzev commented Jun 8, 2020

sachinpatil55 commented Jun 27, 2020

daveycakes commented Jul 14, 2020

Fradomati commented Nov 7, 2020

gooin commented Dec 7, 2020 •

edited

Loading

jswelsh commented Dec 21, 2020

cacheflow commented Feb 24, 2021

Sioomak commented Mar 19, 2021

_typeof is not defined #3422

_typeof is not defined #3422

Comments

bensleveritt commented Oct 20, 2016 • edited Loading

Steps to Trigger Behavior

Expected Behavior

Actual Behavior

jfirebaugh commented Oct 20, 2016

bensleveritt commented Oct 20, 2016 • edited Loading

rotoglup commented Feb 19, 2018

caesarsol commented Jun 7, 2018

digitalkaoz commented Oct 31, 2018 • edited Loading

cyrilchapon commented Apr 10, 2019 • edited Loading

fabiobarboza7 commented Jun 6, 2019 • edited Loading

CharlieMartell commented Aug 23, 2019

CharlieMartell commented Aug 26, 2019

KevinColemanInc commented Jan 22, 2020

jordymeow commented Apr 29, 2020

cyrilchapon commented Apr 29, 2020

willallendev commented May 20, 2020 • edited Loading

zzzev commented Jun 5, 2020

andrew-j-roberts commented Jun 8, 2020

zzzev commented Jun 8, 2020

sachinpatil55 commented Jun 27, 2020

daveycakes commented Jul 14, 2020

Fradomati commented Nov 7, 2020

gooin commented Dec 7, 2020 • edited Loading

jswelsh commented Dec 21, 2020

cacheflow commented Feb 24, 2021

Sioomak commented Mar 19, 2021

bensleveritt commented Oct 20, 2016 •

edited

Loading

bensleveritt commented Oct 20, 2016 •

edited

Loading

digitalkaoz commented Oct 31, 2018 •

edited

Loading

cyrilchapon commented Apr 10, 2019 •

edited

Loading

fabiobarboza7 commented Jun 6, 2019 •

edited

Loading

willallendev commented May 20, 2020 •

edited

Loading

gooin commented Dec 7, 2020 •

edited

Loading