React-mapbox-gl: Uncaught ReferenceError: y is not defined

[UncleChenna]

This error occurs in production but works well in development

[ttrubel]

Workaround from here https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

Install worker-loader to deps if you using CRA and add the following to the start of your code

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

[Slava-fe-mjstk]

@ttrubel

Can you share more details about this workaround?
Made npm i webpack-loader
and after tried to add

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

but it doesn't compile well. Fails with Module not found: Can't resolve 'worker-loader' in projects/hot-app/src/components/shared/Map

[reMRKableDev]

@Slava-fe-mjstk I faced the same issue and realized that it is _"worker-loader"_ that needs to be used instead of _"webpack-loader"_.

Try npm i worker-loader

---

I will say that even with the worker-loader dependency installed, the map isn't rendering on my Netlify build.

Maybe there is something else I'm missing in my implementation @ttrubel ?

Code Implementation --> https://github.com/reMRKableDev/dance-specific-talks/blob/master/src/components/Map/configs/index.js

Live App --> https://ds-talks.netlify.app/map

[ttrubel]

@Slava-fe-mjstk I was wrong, shame on me :) it's a worker-loader, not webpack-loader

@reMRKableDev I see the app is working, hope you figured out it

[reMRKableDev]

@ttrubel I ended up using react-leaflet instead to fix the issue. I'm closing the issue on here since I can't seem to figure out a way around it.

Thanks for everything so far though

[theCodingJohn]

@ttrubel It worked for me. Thanks

[agusterodin]

I would close this issue since the aformentioned webpack-loader stuff seems to work (at least for most). This issue is upstream and is due to mapbox switching to ES6 bundle: https://github.com/mapbox/mapbox-gl-js/issues/10173

[doraeric]

I encounter the issue, too. I solved it with craco without changing source code.

First, install craco

Then, create craco.config.js and set ignore option for babel as below:

module.exports = {
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};

[ottojimb]

I encounter the issue, too. I solved it with craco without changing source code.

First, install craco

Then, create craco.config.js and set ignore option for babel as below:

module.exports = {
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};

It works like a charm! Thank you @doraeric!!

[Fredrikwide]

I encounter the issue, too. I solved it with craco without changing source code.
First, install craco
Then, create craco.config.js and set ignore option for babel as below:

module.exports = {
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};

It works like a charm! Thank you @doraeric!!

I'm having the same issue, but this isn't working for me :(

[KevinColemanInc]

@Fredrikwide the craco fix doesn't work for me either. @Fredrikwide did you find anything?

[tannerhallman]

This may help?
https://github.com/visgl/react-map-gl/issues/1266

[KevinColemanInc]

module.exports = {
  babel: {
    loaderOptions: {
      ignore: ["./node_modules"],
    },
  },
};

As a temporary fix, ignoring all of the node modules resolved the issue :-/

[tannerhallman]

I actually had to switch to google maps because I could not find a workaround that worked without removing this from transpile.