Mapbox production error in console Uncaught Reference Error

With the new release of Mapbox v2.0 plus most react developers try to update their react-map-gl library everything works fine in the development environment.

react-map-gl is a react-library that can be used to integrate Mapbox maps into react apps with ease.

when it comes to production build everything looks good, But when they try to access the actual web app everything collapses with the error Uncaught ReferenceError: is not defined and this only happens to the production version, not in the development version.

So, your web app is fine until it hits the production environment.

Source: If you want more informationr egarding this issue

Luckily we have a fix for this issue.

The problem occurs due to the minification and uglification process during package building and optimization. Mapbox version 2.0 is not playing nice with it and code breaks in the production environment

to fix this we need to use we need load worker-loader module manually

worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker

install worker-loader module by yarn add worker-loader OR npm install worker-loader.

import ReactMapGL from 'react-map-gl';
import mapboxgl from "mapbox-gl";

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

now, this will load Mapbox worker using worker-loader script and all will be good in production build from now on.

if you face such an issue and if this blog helps you to solve it please comment and share your experience.