map returning gray box in production build / hosted on firebase.

[shaheryarJS]

Everything works fine when working on localhost but when I build the app and deploy to firebase, the map doesn't show and returns an empty gray box. I am sure it's not an issue with Mapbox tokens since I have changed them multiple times and got the same result.

[patcombe]

Add the below to the component that you are using react-mapbox-gl with. Also be sure to do a npm i worker-loader

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

Then be sure to do a npm run build before you do a firebase deploy

[HalcyonVagabond]

Thank you Pat! I was having the same issue, and this fixed it.

[rcabre95]

Hey Pat, I'm trying to implement this fix, but i keep getting an error that workerClass does not exist in mapboxgl. Did a recent update get rid of workerClass?

[rmolinamir]

Hey Pat, I'm trying to implement this fix, but i keep getting an error that workerClass does not exist in mapboxgl. Did a recent update get rid of workerClass?

I can't speak for @patcombe but I think his solution is straight from the docs: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Try something like the following:

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

[josdejong]

I got this same issue with a default create-react-app. The workaround https://github.com/alex3165/react-mapbox-gl/issues/938#issuecomment-967789461 works for me. It would be great though if the react-mapbox-gl would work out of the box instead 😅 .

[jedifunk]

could someone help me with this workaround? I'm not tracking what exactly needs to be done.

I'm pretty sure I'm using ES6 properly, and am importing like so: import ReactMapboxGl, {Layer, Source, Feature, Image, Popup, MapContext, ZoomControl} from 'react-mapbox-gl'

do I need to also import mapbox-gl as shown above? i guess i was assuming this package was already doing that.

any guidance is appreciated.

[josdejong]

@jedifunk have you tried the workaround explained in https://github.com/alex3165/react-mapbox-gl/issues/938#issuecomment-967789461?

[valclark1]

@josdejong could you share an example of what you did to make it work? Would I implement the solution in the same file where react mapbox is imported?

[josdejong]

@javonclarke here is the code example: https://github.com/alex3165/react-mapbox-gl/issues/938#issuecomment-967789461

[valclark1]

I'm still getting this error even after implementing the solution: https://github.com/alex3165/react-mapbox-gl/issues/938#issuecomment-967789461

[valclark1]

This worked for me.

https://github.com/alex3165/react-mapbox-gl/issues/931#issuecomment-831587653

[mdsaharshital]

this one worked for me, thanks <3

[ledjajev]

Thank You, Pat!

[saikatXshrey]

Hey Pat, I'm trying to implement this fix, but i keep getting an error that workerClass does not exist in mapboxgl. Did a recent update get rid of workerClass?

I can't speak for @patcombe but I think his solution is straight from the docs: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Try something like the following:

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

Thanks dude🙌

[rameen077]

i changed package.json as below and it worked for me !!!

"production": [
  ">0.2%",
  "not dead",
  "not op_mini all",
  "not ie 11",
  "not chrome < 51",
  "not safari < 10",
  "not android < 51"
],

[ABOBAKAR-IT]

Thanks @rameen077 for the solution, I deploy the React app on VPS, and your solution fixes the map not showing a problem.