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.
Related Questions
- → How to use ReactJS useLocalstorage hook
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → Alt @decorators in React-Native