React map gl only displays markers

[NBNARADHYA]

Context

I used react-map-gl to display a map, and show markers on it.
In local development it works perfectly fine

The issue

But when the site was deployed on netlify, it doesn't seem to work. It doesn't display the map (only the background and makers are displayed). This is how it looks on production site hosted on netlify.

Versions

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-map-gl": "^6.0.3"

[VictorVelarde]

Hi @NBNARADHYA, how are you dealing with mapbox access token? It looks like you might be missing your configuration in your netlify site

[NBNARADHYA]

Hi @VictorVelarde ! I have been using the same default public access token both on local development and netlify

[titou26140]

Up ! Same problem when building.

[VictorVelarde]

If you don't get a visual warning from Mapbox, then the token is probably fine.

You might be having the same issue as #1300.
For confirmation, have a look at your console and see if you find an error like Uncaught ReferenceError: y is not defined [...]

[NBNARADHYA]

If you don't get a visual warning from Mapbox, then the token is probably fine.

You might be having the same issue as #1300.
For confirmation, have a look at your console and see if you find an error like Uncaught ReferenceError: y is not defined [...]

Thanks @VictorVelarde ! I get an error which goes like this: ReferenceError: g is not defined.
I will check out for a solution on issue #1266

[VictorVelarde]

Great!, please confirm that it fixes your issue, so this one can be closed

[NBNARADHYA]

For those out there in a similar spot, I was able to hack around things for the time being by adapting the suggestions in mapbox/mapbox-gl-js#10173:

Install worker-loader:

yarn add worker-loader

In your map component:

import ReactMapGL from "react-map-gl";
import mapboxgl from "mapbox-gl"; // This is a dependency of react-map-gl even if you didn't explicitly install it

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

I hope the Mapbox team can provide a long term solution soon.

Originally posted by @zanemountcastle in #1266 (comment)

[NBNARADHYA]

The above solution fixes this issue for now !