'React Map Gl cannot find variable on production build

I’ve made an app using React (create-react-app) and the react-map-gl library, but I do have an error in the production build, checking the logs it says

variable x is not defined

It is a known problem and I’ve seen a solution on GitHub, it says to downgrade the library to 5.2.1 or add a WorkerClass but both of them doesn’t fix the error.

If I downgrade the library, it messes up some styles, whereas adding the WorkerClass doesn’t fix the issue.

How can I solve?

reactjs mapbox-gl-js

Solution 1:^[1]

Edit craco.config.js which sits at the root of the project to tell babel-loader that it should ignore mapbox-gl from transpilation.

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

See official Mapbox GL JS documentation regarding Excluding Mapbox GL JS explicitly from transpilation and Babel documentation for ignore.

Solution 2:^[2]

downgrade the package version to @5.2.11 and it will be ok.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ash
Solution 2	Mohammad Ali Vakilidoost

'React Map Gl cannot find variable on production build

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]