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

[antoinealej]

--- 🔴 EDIT from a gl-js maintainer 🔴 ----
We've just opened #10565 do go over some of the decisions of why we moved to ES6, and also summarizing the solutions that everyone has contributed in this thread.
Would love for the discussion to be continued there. 🙇🏽
--- 🔴 END EDIT🔴-----

mapbox-gl-js version: 2.0.0

browser: Google Chrome Version 87.0.4280.67 (Official Build) (x86_64)

Steps to Trigger Behaviour

I'm trying to build a library of Vue components and one component uses mapbox-gl.
I created a test project to showcase the issue.

1. Create a Vue library (vue create library)
2. Add mapbox-gl to the library in a component
3. Build the library
4. Use the library in a Vue application

When I build and use it I have an error message saying:

Uncaught ReferenceError: _createClass is not defined

Link to Demonstration

https://gitlab.com/antoinealej/test-lib-mapbox-gl-build

Expected Behaviour

Display the map over a beige background

Actual Behaviour

Only displays the beige background container

[mourner]

Thanks for the report! The root cause of this is that after our switch from a ES5 bundle to a ES6 one, Babel transpilation of the bundle breaks it due to the way we set up worker code. We're investigating ways to address this, but the current workaround is to configure your app to exempt mapbox-gl from being transpiled.

[antoinealej]

Thanks for the explanation!
I'm trying to exclude it from the transpilation, I understand it's more a Babel issue but do you happen to know how I can exclude mapbox-gl in my current situation?
I tried:
vue.config.js

module.exports = {
  css: { extract: false },
  configureWebpack: {
    performance: {
      hints: false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    },
    plugins: []
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .test(/\.js/)
        .exclude
          .add(/node_modules\/mapbox-gl/)
          .end()
        .use('cache-loader')
          .loader('cache-loader')
          .end()
        .use('babel-loader')
          .loader('babel-loader')
          .end()
  }
}

[arthur-clifford]

I just wanted to add that I get the same behavior with an Angular project which of course is also using webpack for transpilation. FWIW I'm also targeting ES6 and that doesn't make a difference.

I don't know if this helps as it is not the direct issue, but its something I found when I was wondering if the problem was my fault:
https://www.javaprogramto.com/2019/12/4-solutions-uncaught-referenceerror-is-not-defined.html

The other issue I noticed in attempting the 2.0.0 version is that I got the error suggesting that AMD or CommonJS scripts cause bailout issues; which in Angular-speak means I had to add it to my allowedCommonJsDependencies entry in the angular.json file.
However, that was NOT true for previous releases.

I'm wondering if there is a CommonJS or other dependency that needs to be loaded and/or checked for being loaded ahead of mapbox-gl functionality being called? Is anything filename dependent? That is when the code gets moved to a shared chunk file with a funky long alphanumeric name. is something looking for mapbox-gl.js and not loading it? These questions are based on a read of the link above.

I also ran across this question on stack overflow and the marked answer is interesting:
https://stackoverflow.com/questions/34973442/how-to-stop-babel-from-transpiling-this-to-undefined-and-inserting-use-str
Given what I said about previous versions not complaining about CommonJS, Might you be compiling what is put up to npm as a commonJS wrapped package without knowing about it based on some babel or other configuration issue on your end?

Admittedly I'm not knowledgeable enough on the setups of everything y'all are using or the consequences of the changing to ES5->ES6, except for what the previous link mentions about different babel versions which wrap scripts in CommJS wrappers.

Hopefully there is something helpful here. If you put up a potential fix I can update my project to use via npm I will be happy to try again and report any findings.

[antoinealej]

@mourner @arindam1993 I can't manage to make this work without the fix. The map part of my library will be on hold until it's done. Do you guys have an approximate ETA for this?

[mourner]

@antoinealej still investigating this as it's quite a tricky problem, but we expect to have a fix as a part of v2.0.1 in about a week or two, and will also try to find a definite workaround early next week.

[LeonSkrilec]

I have the same issue after upgrading to 2.0 in an app created with "Create react app". It breaks when loading the map, but it works afterwards while dynamically changing the styles. Rolling back to v1 for the time being.

[mkmdivy]

Same issue here

[timfpark]

I have the same issue with React with Create React App. Works great in dev, but does not work with a production build.

Repros with as little as instantiating the map:

const newMap = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',
    center: [-121, -34],
    pitch: 50,
    bearing: 80,
    zoom: 10.0
});

with the following error:

[8c586751-6b29-401a-a42b-d3a9e4cf22ce:1 Uncaught ReferenceError: y is not defined

[chriswhong]

Same behavior observed in a gatsbyjs app, maps work fine when running gatsby develop, built site throws Uncaught ReferenceError: m is not defined

[mourner]

Heads up that so far we've landed #10219 to make it easier to fix (will be included in the v2.0.1 patch release), and are also adding a docs section on transpilation issues: https://github.com/mapbox/mapbox-gl-js-docs/pull/461

[dfalling]

It looks like the fixes will require customizing our bundlers. Is there any fix planned that will help those of us using Create React App with no access to our bundler?

[dhruv9499]

Console Error:-

Production Build Screenshot-

I pulled my hair for 3 hours to find the issue.

[zacharyliu]

One workaround for Create React App, where the bundler config is not configurable, is to use Webpack's inline loader syntax.

First, install the worker-loader package (yarn add worker-loader). Then add the following snippet somewhere in your app, ideally right below your imports:

// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

You probably need the eslint-disable line so Create React App doesn't error out the build.

[LeVadim]

Hello! Are there any workarounds for Create React App integration?
Unfortunately replacing workerClass did not solve the issue.
Thank you

[timfpark]

Taking @LeVadim's comment a bit further after reflecting on it a couple of days - I think you all will have a lot of issues filed on you on a constant basis if this doesn't "just work" with create-react-app given its very high level of popularity.

[momolarson]

One workaround for Create React App, where the bundler config is not configurable, is to use Webpack's inline loader syntax (after installing the worker-loader package):

// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

You probably need the eslint-disable line so Create React App doesn't error out the build.

I tried this an get the same error.

[rsippl]

One workaround for Create React App, where the bundler config is not configurable, is to use Webpack's inline loader syntax (after installing the worker-loader package):

// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

You probably need the eslint-disable line so Create React App doesn't error out the build.

I tried this an get the same error.

@momolarson this workaround works for me in a React app. I added the worker-loader package (yarn add worker-loader), added the two lines after the imports, and the result of yarn build works fine for me.

[momolarson]

@rsippl - wow! thanks for the tip! I had added it before my imports (specifically AFTER the mapbox-gl import). I really appreciate that!

[cigzigwon]

@mtuanp exclude !== ignore and there are some issues getting this to work in Gatsby. Anybody using it yet?

[nicowernli]

After a bunch of digging into various options, including providing a ES5 build here
It seems all it serves to do is revive an old error #3422, most create-react-app users never saw this error because it has an explicit exclusion in its Babel presets for that particular transform. https://github.com/facebook/create-react-app/blob/3c02ca74f9eb099e4d5eed3f646bfad118da635b/packages/babel-preset-react-app/create.js#L87
So I think the easiest, also most performant solution for create-react-app users would be to update browserlists in package.json to exclude older browsers

browserslist: [
      ">0.2%",
      "not ie 11",
      "not dead",
      "not chrome 49"
    ]

And if you really need transpilation for your project to force support for IE11 and old versions of chrome then the using the workerClass hook as @bmg817 pointed out is the way to go.

this one is sadly not working for me. not sure why tho.
Im using CRA and just the vanilla mapbox-gl not the react wrapper,

any idea where the problem could be? my application seems to be the same after chaning the browserslist but the map still dosent work. is there anything else i would've to do for this to work?

the other 2 solutions worked for me. but i wouldnt mind cleaner fix

You should follow this solution #10173 (comment)

[cigzigwon]

@nicowernli Go here instead as I've outlined everything as a consumer of the lib. Browserlists isn't a solution. see here

[tatendabakozw]

babel: {
loaderOptions: {
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js'],
},
},

this worked for me. thank you

[booherbg]

I have a project that I haven't touched in months. Now when I open the project, I get this error (even though I haven't upgraded or changed anything). I can't figure out why -- maybe because my browser has updated? So far none of the fixes have helped me resolve this issue which is pretty frustrating since this project had a working map but now it does not, even though the project and project dependencies haven't changed.

[mychips]

I had the same problem and I solved using // @ts-ignore before import line, like this:
// @ts-ignore
import mapboxgl from '!mapbox-gl';

and vuala the map appears.

I hope this works for you

[nadun-malinda]

I'm working on a React project using DeckGL, react-map-gl , and react-vis. Had the same issue and after downgrading react-map-gl to version ^5.3.17, my problem has been solved.

[Heshiyu1996]

I had the same problem and I solved using // @ts-ignore before import line, like this: // @ts-ignore import mapboxgl from '!mapbox-gl';

and vuala the map appears.

I hope this works for you

It works for me, Thanks!!!

By the way, The above setting which changes the workerClass is not working well for me, and the console display:

UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation

I guess it is related to the version of webpack.

[saifali-95]

Hi @dhruv10, Have tried downgrade react-map-gl to the latest 5 version https://github.com/visgl/react-map-gl/releases/tag/v5.3.10. Because the version 6 is only supported with mapbox-gl >=2, as I know.

Downgrading react-map-gl to version 5.3.10 solved my problem. Thanks

[emekaokoli]

Heads up that so far we've landed #10219 to make it easier to fix (will be included in the v2.0.1 patch release), and are also adding a docs section on transpilation issues: https://github.com/mapbox/mapbox-gl-js-docs/pull/461

this link appears to be dead, can you share a working link please?

[emekaokoli]

Please is there any fix on this for create react app? none of the suggestions above worked for me, I am way behind in my project because of this. I am very frustrated about this.

[sypyyy]

For anyone who is still struggling with this in a create-react-app environment. My solution was to fix all the warnings related to maplibre thrown by npm start.
I tried with all the solutions above and none of them works for me. And just when all hope seem lost, I tried to fix the compile warnings thrown and it worked!!!!!!!!!!!!!!!!!!!!!!

[emekaokoli]

Please can you share how you went about that? Because in my case the map goes blank.

…

On Wed, 14 Dec 2022 at 2:38 PM, sypyyy ***@***.***> wrote: For anyone who is still struggling with this in a create-react-app environment. My solution was to fix all the warnings related to maplibre thrown by npm start. I tried with all the solutions above and none of them works for me. And just when all hope seem lost, I tried to fix the compile warnings thrown and it worked!!!!!!!!!!!!!!!!!!!!!!

[matthew-mcdermott]

For anyone who arrives here like I did, I will share what worked for me. I am using DeckGL, maplibregl, CRA, and react-map-gl. This is what worked for me: visgl/react-map-gl#1284 .

Specifically, I added the following to my browserlists configuration in package.json: ">0.2%, not dead, not ie 11, not chrome < 51, not safari < 10, not android < 51"

[MoradAbed]

Solution for this issue that worked for me without changing the browserlists:

In Map.js component:

import { workerClass } from 'mapbox-gl';
import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';

workerClass = workerLoader;

in eslintrc:
"import/no-webpack-loader-syntax": "off", "import/no-unresolved": "off"
,

[Hongdeshuai]

import { workerClass } from 'mapbox-gl';
[email protected] doesn't export workClass

[Oli-G33]

For anyone who is still struggling with this in a create-react-app environment. My solution was to fix all the warnings related to maplibre thrown by npm start. I tried with all the solutions above and none of them works for me. And just when all hope seem lost, I tried to fix the compile warnings thrown and it worked!!!!!!!!!!!!!!!!!!!!!!

Could you please explain what you mean by this exactly? I'm having the same issue.

[emekaokoli]

Wait, so this is still an issue using Mapbox's current build?

[Oli-G33]

Solution is here:

https://github.com/maplibre/maplibre-gl-js/discussions/675

This part of your package.json file should look like this:

"browserslist": { "production": [ "defaults", "not ie 11" ],