blank map with gray background while using react-map-gl in production build (even after trying all 3 solutions from mapbox official)

[iAmZubair00]

Description

I am not able to display map properly in production, while using react-map-gl in create-react-app. App is working fine on localhost but it throws errors in the console while running in production. I have tried all the 3 solutions mentioned in official mapbox docs https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

I first tried these solutions one by one separately, and then all 3 solutions simultaneously, but none of these 4 attempts worked.

I have attached the screenshot of console errors below along with live URL of my production site and github code.

Live URL: https://parking-app-fyp.vercel.app
github code: https://github.com/iAmZubair00/parking-app-fyp

Environment:

• react-map-gl 6.1.18
• mapbox-gl 2.6.1
• react 17.0.2

Logs

Code used for "3 tried solutions":

Loading and transpiling the Web Worker separately:
import mapboxgl from "mapbox-gl"; // eslint-disable-next-line import/no-webpack-loader-syntax import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; mapboxgl.workerClass = MapboxWorker.default;

Excluding Mapbox GL JS explicitly from transpilation:
module.exports = { babel: { loaderOptions: { ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"], }, }, };

Targeting transpilation to ES6 with browserslist:
"browserslist": { "production": [ ">0.2%, not dead, not ie 11, not chrome < 51, not safari < 10", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }

[a-tokyo]

Facing the same issue! I also tried the 3 solutions with no luck.

[Pessimistress]

To use craco you need to install it and use their scripts. https://www.npmjs.com/package/@craco/craco

There is already a pinned issue at #1266. If you are not happy with the solution, take it to the mapbox-gl repo.

[iAmZubair00]

To use craco you need to install it and use their scripts. https://www.npmjs.com/package/@craco/craco

There is already a pinned issue at #1266. If you are not happy with the solution, take it to the mapbox-gl repo.

I have installed craco by using "npm install craco", and I have already viewed your mentioned issue which has not solved my problem. They are suggesting a very strange solution there, to downgrade your react-map-gl to lower version!

[a-tokyo]

@iAmZubair00 This worked for me #1266 (comment). The map now loads. Hope it works for you!

[a-tokyo]

Tempfix:

In the Map component, add:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
mapboxgl.workerClass = MapboxWorker;

[iAmZubair00]

Tempfix:

In the Map component, add:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
mapboxgl.workerClass = MapboxWorker;

means this is the modified solution #1 (Loading and transpiling the Web Worker separately) ? right
and you have not used solution 2, and 3 in parallel with this solution?
@a-tokyo

[a-tokyo]

@iAmZubair00 Correct

[iAmZubair00]

and working well in production?

[iAmZubair00]

Tempfix:

In the Map component, add:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
mapboxgl.workerClass = MapboxWorker;

I got some errors in the console and map did not load, even in the localhost after using the above solution.
Writing "MapboxWorker,default" in place of "MapboxWorker" stopped the errors and it worked on localhost

[a-tokyo]

So the final solution becomes:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
mapboxgl.workerClass = MapboxWorker.default;

[Pessimistress]

I have installed craco by using "npm install craco"

I can see in your package.json you are still using react-scripts build. According to the craco documentation you need craco build.

[iAmZubair00]

I have installed craco by using "npm install craco"

I can see in your package.json you are still using react-scripts build. According to the craco documentation you need craco build.

But according to @a-tokyo , it should now work without using craco(which is solution #2)

[Pessimistress]

You do not need multiple solutions. Either one would work.

[iAmZubair00]

still getting same error in production, only change in the error is that variable 'y' is now variable 'm' which is missing!

I will now try to change package.json to use craco properly!
But there is one issue while installing craco:
cmd says:

Found: [email protected]
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"^5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/[email protected]

and following solution also don't work:
https://stackoverflow.com/questions/67056349/craco-could-not-resolve-dependency-error

[iAmZubair00]

I have installed craco by using "npm install craco"

I can see in your package.json you are still using react-scripts build. According to the craco documentation you need craco build.

changing scripts to use Craco, worked!
I had to use craco version 5.0.0 (instead of the latest 6.4.3) which was compatible with react-scripts 5.0.0
Thanks, @Pessimistress