React-map-gl: 6.x.x production build error "x is not defined"

[testower]

I upgraded to 6.0.0 (also tried 6.0.1) and everything works fine in development mode, but in the production build the background map doesn't render using. I'm using a mapbox token.

        <StaticMap
          key="map"
          width="100%"
          height="100%"
          mapStyle={MAPBOX_MAP_STYLE}
          mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
        />

I have an IconLayer that renders just fine, but on top of a grey background :/

[Pessimistress]

Do you see any error in the console? Might be caused by https://github.com/mapbox/mapbox-gl-js/issues/10173

[testower]

Thanks, it seems related, I will follow that issue!

[Velidoss]

In production build I've got this error. Could you help, please?

[Pessimistress]

@Velidoss please visit the Mapbox issue I linked above. The bug is in [email protected]. There is a temporary work around by adding additional bundler settings.

[sgup]

Same issue here. As a quick workaround I downgraded to v5.2.11 of react-map-gl:

yarn upgrade [email protected] and it works.

[zanemountcastle]

Downgrading to v5.2.11 of react-map-gl was insufficient for my use case since I'm using Mapbox GL JS v2.x.x features (setTerrain() specifically)

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.

[robinjhuang]

Having the same issue

[aditbharadwaj]

Having the same issue

use the above work around for mapbox worker class it works gr8 for now 👍

[marc-slingshot]

looks like they are working on a PR to address this here - https://github.com/mapbox/mapbox-gl-js-docs/pull/461

Looks like the "right" way might be to add this code:

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

[jiaranda]

Could someone explain why this works?

[Pessimistress]

Mapbox has now published the official solution to this issue: https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

[JG145]

I am still struggling to get this to work. I am able to get Mapbox-GL to work by using:
import mapboxgl, { queryRenderedFeatures } from "!mapbox-gl";

but still getting:
Uncaught ReferenceError: _createClass is not defined

sure i am missing something obvious but any help would be appreciated

[kentongray]

@JG145 what I had to do was the following (as a create react app and typescript user)

yarn add worker-loader

/* eslint-disable @typescript-eslint/no-var-requires */
(mapboxgl as any).workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

[JG145]

Still hitting the same issue?

gone with:

import mapboxgl from "!mapbox-gl";

import { StaticMap } from "!react-map-gl";
/* eslint-disable @typescript-eslint/no-var-requires */
mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;

Changing the above to:

import mapboxgl from "mapbox-gl";

import { StaticMap } from "react-map-gl";
/* eslint-disable @typescript-eslint/no-var-requires */
mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;

elicits this error:

VM1351:63121 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://app.powerbi.com/13.0.15255.54/assetsmapbox-gl-csp-worker' cannot be accessed from origin 'null'.

[StrangersSoftware]

Also get no clue how to solve this issue in versions above 5.3.4. Downgrade to v 5.3.4 solves it for now for me. If someone got a result on versions 6.0.0 and above for React, please give some code example here.