Uncaught ReferenceError: y is not defined

[UncleChenna]

This error occurs in production but works well in development

[ttrubel]

Workaround from here mapbox/mapbox-gl-js#10173 (comment)

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;

[8L4V4]

@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

[jhay-25]

@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: mapbox/mapbox-gl-js#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?
visgl/react-map-gl#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.

[Jayanth9710]

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"],
    },
  },
};

Could you please explain a lil bit more ... am very new to coding but I want to display this mapbox style map using netlify.. I have doubt on how to set that ignore option

[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"],
    },
  },
};

Could you please explain a lil bit more ... am very new to coding but I want to display this mapbox style map using netlify.. I have doubt on how to set that ignore option

I noticed that they change their doc link, so it's broken.
Here's the new link about ignore option from mapbox. You can find all babel options here.
However, I just follow the instruction from mapbox's document, so I can't tell why should the option be set.

I don't know why craco doesn't work for some people, maybe there is different setup?
I tried today, it's still work. I create a project with create-react-app, add sample code from README, change to craco, and it works!
hello-world.zip
This is the zip I produced with the steps above, hope this may help.

[chriszrc]

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

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

This was the only thing that worked for me. But I'm trying to understand why, it seems like everything points to the problem being in the mapbox dependency, why isn't ignoring that enough?

[doraeric]

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

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

This was the only thing that worked for me. But I'm trying to understand why, it seems like everything points to the problem being in the mapbox dependency, why isn't ignoring that enough?

Does my hello-world.zip work for you?
I have tested it and it works on my computer, so if it doesn't work on your pc, maybe the reason is from environment, like node.js version, system, etc.

[ashnewport]

Working for me now by editing craco.config.js to tell babel-loader to ignore mapbox-gl from transpilation. Working config:

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

My package.json has:

"dependencies": {
  "mapbox-gl": "^2.5.1",
  "react-map-gl": "^6.1.17",
},
// ...
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 3 safari version"
  ]
},

I put an answer up on SO with the same solution https://stackoverflow.com/questions/66421921/react-map-gl-cannot-find-variable-on-production-build/70060851#70060851

[Coreball]

Editing craco.config.js worked for me!

[sanchezzzs]

Editing package.json worked for me. I'm using maplibre-gl

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

check this: https://docs.mapbox.com/mapbox-gl-js/guides/install/#targeting-transpilation-to-es6-with-browserslist

[tvonessen]

Editing package.json worked for me. I'm using maplibre-gl

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

check this: https://docs.mapbox.com/mapbox-gl-js/guides/install/#targeting-transpilation-to-es6-with-browserslist

I can confirm this. My previous setting was not working:
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], },

[emekaokoli]

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"],
    },
  },
};

Could you please explain a lil bit more ... am very new to coding but I want to display this mapbox style map using netlify.. I have doubt on how to set that ignore option

I noticed that they change their doc link, so it's broken. Here's the new link about ignore option from mapbox. You can find all babel options here. However, I just follow the instruction from mapbox's document, so I can't tell why should the option be set.

I don't know why craco doesn't work for some people, maybe there is different setup? I tried today, it's still work. I create a project with create-react-app, add sample code from README, change to craco, and it works! hello-world.zip This is the zip I produced with the steps above, hope this may help.

did not work for me, I am really surprised no official fix for this.

[mohnark]

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

Worked for me

[agurtovoy]

We're using react-mapbox-gl with maplibre-gl in a CRA + TypeScript app, here's a modified version of mapbox/mapbox-gl-js#10173 (comment) that worked for us (nothing else did):

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