'Uncaught ReferenceError: y is not defined' - uglify went wrong in v2.0.x

[brdv]

mapbox-gl-js 2.0.1:

If something in this issue is not set up properly or unclear, please let me know so I can fix it.

Project Setup

Using Mapbox 2.0.1 in a create-react-app with react v17.0.1 and typescript 4.0.3. Initiated the project with create-react-app, using react-scripts 4.0.1.

Problem

When trying to deploy the app, firstly we run yarn build. This seems to do it's job, no build errors. However, when we actually deploy it, e.g. serve the build. We run in to a 'referenceError: y is not defined'.
Now this is a problem that, when googling, used to come up a lot more on versions like 0.4x.x. See the following examples.

• mapbox issue #4359
• CRA issue #2376

This should give you an idea of the problem. There are some possible fixes included as well, however, after applying these do not seem to work. A little digging into the react-scripts shows why (they already fixed this):

Steps to Trigger Behavior

Clone my demo repo: mapbox-build-error which was created with CRA and the mapbox react tutorial. (For simplicity this repo is using JavaScript in stead of TypeScript.)

My following steps (macos) are as follows:

• run yarn install
• run yarn build
• run serve -s build

Go to the link in the console and there will probably not be a map.
The console will show: 'Uncaught ReferenceError: y is not defined'

Current fix

When downgrading the version of Mapbox-gl to 1.13.0. The build works just fine. This is what we will have to do until the issue is fixed.

Thanks in advance!

[momolarson]

I see this as well. I tried experimenting with using rewire and my own build.js, but I just get an assorted set of errors all related. I was able to get it to produce a more readable error:

Uncaught ReferenceError: _createClass is not defined

This is my build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.devtool = 'eval';
config.plugins.UglifyJsPlugin = {
  sourcemap: true,
  cache: false,
  compress: {
    warnings: false,
    inline:2,
    ecma:5,
    comparisons: false,  // don't optimize comparisons
    //exclude: '/node_modules/mapbox-gl/dist/mapbox-gl.js',
  },
};
config.plugins.noParse = '/node_modules/mapbox-gl/dist/mapbox-gl.js';
config.plugins.noParse = '/node_modules/mapbox-gl/dist/mapbox-gl.css';
config.output.filename = 'hut.js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = 'hut.css';
config.plugins[5].options.publicPath = '../';

[vorvex]

Same Problem occurs when using create-react-app. When investigating I also get _createClass is not defined as an error.

[alexhouse]

I'm running into the same issue but downgrading to 1.13.0 has fixed things (thanks @brdv for the workaround!). Not ideal, but will have to do for now.

[subedigaurav]

I faced the same issue and it had me stuck for a good couple of hours. Then, I saw this issue and downgraded to 1.13.0. It worked. Hope this is fixed in the new version soon.

[mourner]

Essentially a duplicate of #10173. Latest update / workarounds are here #10173 (comment)

[momolarson]

Essentially a duplicate of #10173. Latest update / workarounds are here #10173 (comment)

Yeah, it's a duplicate, but the workaround doesn't work. Looking forward to trying the patch.

[brdv]

Essentially a duplicate of #10173. Latest update / workarounds are here #10173 (comment)

@mourner Thanks, will try this asap!

[mourner]

but the workaround doesn't work. Looking forward to trying the patch.

That's because workerClass was added in v2.0.1 specifically to address this issue. Should work in the patched version.

[momolarson]

but the workaround doesn't work. Looking forward to trying the patch.

That's because workerClass was added in v2.0.1 specifically to address this issue. Should work in the patched version.

my issue was that I had put the workaround before I imported mapbox-gl 2.0.1 when I placed the code after, it worked as expected.

[LukeXF]

Is there a solution for this?

[mourner]

@LukeXF yes, see https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

[adilgrover]

how to downgrade the version

[EmmanuelTheCoder]

Downgrading worked for me. Thanks. I hope there will be a permanent fix for this soon.

[EmmanuelTheCoder]

@adilgrover npm i mapbox-gl@1.13.0

That's how to downgrade. You might need to uninstall mapbox-gl from your project before downgrading

[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.
For me the detrimental warning was I defined a new marker but never used it.
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!!!!!!!!!!!!!!!!!!!!!!