6.x.x production build error "x is not defined" #1266

testower · 2020-12-18T09:19:22Z

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 :/

The text was updated successfully, but these errors were encountered:

Pessimistress · 2020-12-18T15:15:54Z

Do you see any error in the console? Might be caused by mapbox/mapbox-gl-js#10173

testower · 2020-12-21T09:20:12Z

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

Velidoss · 2020-12-24T07:40:45Z

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

Pessimistress · 2020-12-24T08:01:28Z

@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 · 2020-12-24T23:48:21Z

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 · 2021-01-03T22:45:05Z

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 · 2021-01-08T05:25:25Z

Having the same issue

aditbharadwaj · 2021-01-08T05:27:41Z

Having the same issue

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

marc-slingshot · 2021-01-11T18:30:54Z

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 · 2021-01-15T14:06:09Z

Could someone explain why this works?

Pessimistress · 2021-01-29T20:40:14Z

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

JG145 · 2021-02-01T20:01:34Z

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 · 2021-02-01T20:04:38Z

@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 · 2021-02-01T20:57:21Z

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'.

vehere-ccuMaksym · 2021-02-06T16:36:57Z

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.

Antje3 · 2021-02-11T08:49:36Z

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.

If you use typescript, just add // @ts-ignore above the eslint-disable line to ignore the typescript error when compiling (Property 'workerClass' does not exist on type 'typeof mapboxgl'.). This worked for me.

visgl/react-map-gl#1266

* Add sdorsys boilerplate * Add sharp w typescript * Add frontend mock * Refactor backend into /electron * Add FE module * Add dynamic loading of FE assets * Add TS support to the FE * Add basic yarn workspace (shared/frontend) * Add waiting to electron module & update module import in electron * Update readme * Add storybook support * Add eslint to the electron ts code * Add jest support in the backend * Add tests to FE * Clean FE styles * Add render to render IPC communications * Add atoms and molecules (component library) * Add molecules and organisms * Add navBar molecule * Update molecules * Add start page, add static and clean tests * Add pre-processing and settings pages * Fix gallery bug and add dashboard page * Add shared types and add component type inference * Add redux dependency to FE * Add redux and real types * Update shared module types, message bug, and todos * Add BE messageBus handler skeleton & ML * Add DB module and tests * Add destroy handler, type refactors and twitter link * Add reset handler dep injection and tests * Update handlers and add utils * Break down services and add dependency injection * Add tests for the date service * Add file service types and tests * Add test coverage and comments to image service * Add exposed types in services and handlers * Fix webId population, add handler dep injection * Clean up sharp loading and add processing (not working yet) * Add test skeleton for the ML operations and test-images * Add tag tests, update classification services and types * Add custom tag types * Update tests * Add filter images with location, update types and message bus * Fix backend tests and clean up FE dead tests * Update FE build leftovers * Enable loading local image files * Add FE fonts * Add ML dependencies to BE * Add box shadow to UI buttons * Clean up isProcessing dependency from FE -> Redux * Remove unused prop isProcessing from store and UI * Fix flanky test (jest --clearCache) * Add fallback to map component * Fix shared build error (due to TF) * Fix button shadow * Silence process errors and fix image paths * Add react and redux extensions to electron main * Clean up unused config * Fix filtering bug * Add app icon and update todos * Update app naming in FE * Remove isDev dependency + skeleton of docs * Add CI support * Update CI workflow files * Add craco to fix map bug visgl/react-map-gl#1266 * Clean up sharp dependency * Fix the map issue by rolling back * Hide backend window in prod * Update isDev flag * Clean tasks * Add partial README * Add documentation * Optimize build * Update tests * Update CI to only run on PRs * Clean up old README * Remove CI * Add screenshot

stevepepple · 2021-11-26T16:45:49Z

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

Thanks so much for this. I'd tried a few other solutions and wasn't sure what do try next!

MalikOwais123 · 2021-12-24T14:15:06Z

mapbox-gl

Is it for production fixes also because i tried and it is working fine on development mode..

Can we use this version on prod as well..

sangdth · 2022-02-04T09:01:46Z

Update: There was a fix on Nextjs, but still in canary branch.

vercel/next.js#30237 (comment)

ariel-upstream · 2022-02-17T12:41:42Z

Is there any elegant solution for that (react-scripts)?

mohammad6vakili · 2022-02-18T17:50:10Z

downgrade to version @5.2.11 and it will be ok

kyuumeitai · 2022-03-26T02:57:17Z

Hi there, I'm writing from 2022 and downgrading did the trick for me.

sloev · 2022-03-30T15:30:51Z

hi, i still recommend ejecting from create-react-app and specifying the webpack config like in my previous comment, it means i can upload as i find fit.
(#1266 (comment))

tclaff · 2022-04-11T22:17:01Z

Had the same problem using react-map-gl together with maplibre. I could manage to fix it by using craco (https://github.com/gsoft-inc/craco). Here is my craco.config.js:

const CracoWorkboxPlugin = require('craco-workbox');

module.exports = {
  babel: {
    loaderOptions: {
      // this option lets us display the map-pin marker layer - without this it does not work: https://github.com/visgl/react-map-gl/issues/1266
      ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
    }
  },
  plugins: [{
    plugin: CracoWorkboxPlugin
  }],
  webpack: {
    alias: {
      'mapbox-gl': 'maplibre-gl',
    },

  },
};

Hope this helps someone.

dorthwein · 2022-05-10T16:43:05Z

Speaking from 2022 as well - after trying many things, this is the comment to follow for a direct few line fix on a create react-app without having to eject

#1266 (comment)

strimbob · 2022-10-06T19:10:35Z

does this still not work, tried #1266 (comment) but i get an error with typescript and does not work, feels mega hacky -

update this did work just had to add the // @ts-ignore

// @ts-ignore
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; /* eslint import/no-webpack-loader-syntax: off */

thanks everyone for figuring it out

emekaokoli · 2022-12-08T14:53:35Z

December 2022 I am facing this issue in production only.

Throws this error

 "Mapbox-gl": "^2.9.2",
 "react-map-gl": "^7.0.19",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",

The map is blank

can someone please help, it's killing me.

emekaokoli · 2022-12-08T15:02:50Z

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

throws Do not use import syntax to configure webpack loaders in react

emekaokoli · 2022-12-12T17:33:45Z

December 2022 I am facing this issue in production only.

Throws this error
 "Mapbox-gl": "^2.9.2",
 "react-map-gl": "^7.0.19",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
The map is blank

can someone please help, it's killing me.

can anyone please help?

alex-kowalczyk · 2022-12-16T18:54:16Z

@emekaokoli, I have similar issue with maplibregl after building production build.
Map does not display any vector layer (except hill-shading raster layer which displays OK).
I found out that changing browserlist in package.json from

[">0.2%", "not dead", "not op_mini all"]

to

["last 1 firefox version", "last 1 chrome version"]

solves the issue, but obviously it's not suitable for production.
I did not find a "golden mean" yet for browserslist, if anyone knows, please share.

emekaokoli · 2022-12-20T21:35:28Z

December 2022 I am facing this issue in production only.
Throws this error
 "Mapbox-gl": "^2.9.2",
 "react-map-gl": "^7.0.19",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
The map is blank
can someone please help, it's killing me.
can anyone please help?

solved: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

martinjuhasz · 2023-04-28T12:22:09Z

While i could fix the initial error by using the worker-loader solution provided and the map tiles now loading, i still get errors.

The Map and tiles are loading, but city names f.e. will not show up. It works locally, so only on a production build this fails.

Javascript console error from the mapbox worker file is Error: "a" is read-only.

Any ideas how to fix this?

Edit:

I've digged a little deeper. So while this works

// @ts-ignore
import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp'
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'
mapboxgl.workerClass = MapboxWorker

As soon as i use any mapboxgl related import it fails again. For example i'm doing some pan and zooming depending on boundaries and calculate them using LngLatBounds.

But when using the above technic it fails, both locally and in production

// @ts-ignore
import mapboxgl, { LngLatBounds } from 'mapbox-gl/dist/mapbox-gl-csp'
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'
mapboxgl.workerClass = MapboxWorker

While developing locally everything worked, using default imports.

import { LngLatBounds } from 'mapbox-gl'

// pseudo Code for reference

const fitMap = () => {
	// ...
	const bounds = new LngLatBounds(
		{
			lng: points[0][0],
			lat: points[0][1],
		},
		{
			lng: points[0][0],
			lat: points[0][1],
		},
	)
	for (const point of points) {
		bounds.extend([point[0], point[1]])
	}
	map.fitBounds(bounds, { padding: 30, maxZoom: 9 })
}

any ideas what causes this?

erlajoua · 2023-07-05T20:40:02Z

downgrade to version @5.2.11 and it will be ok

INSANE WOKS ! THANKS , THIS MAN IS SO GOOD

parsatajik · 2023-10-23T20:36:55Z

Hey! I hosted my app on Netlify and was getting similar problems. The below steps fixed my issues:

Exclude Mapbox GL JS from transpilation: You can exclude Mapbox GL JS from transpilation by adding an .env file in the root of your project with the following line:
SKIP_PREFLIGHT_CHECK=true
Target transpilation to ES6 with browserslist: You can target transpilation to ES6 by adding the following browserslist configuration to your package.json file:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "not safari < 10",
    "not chrome < 51",
    "not android < 5",
    "not ie < 12"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

Pessimistress mentioned this issue Dec 21, 2020

Bug: m is not defined error - Map css will not appear in production for latest version #1275

Closed

kylebarron mentioned this issue Jan 3, 2021

react-map-gl with Mapbox v2 fails #1284

Closed

marc-slingshot mentioned this issue Jan 11, 2021

create-react-app (react-scripts 4.0.1) not working with react-map-gl 6.0.3 #1292

Closed

Pessimistress pinned this issue Jan 15, 2021

kylebarron mentioned this issue Jan 16, 2021

react build problem #1300

Closed

tpliakas added a commit to tpliakas/MyCity-Social-Network that referenced this issue Jan 24, 2021

Fallback to Mapbox v1 until issue resolves. visgl/react-map-gl#1266

5c3b26e

Pessimistress changed the title ~~After upgrading to 6.x.x background map does not render in production build~~ 6.x.x production build error "x is not defined" Jan 24, 2021

Pessimistress mentioned this issue Jan 25, 2021

Map is not displaying in production. #1305

Closed

jessicagertig mentioned this issue Jan 27, 2021

MapBox GL JS fix for map render BloomTech-Labs/deprecated-Express_Groomer-TeamB-FE#62

Merged

8 tasks

Pessimistress mentioned this issue Feb 2, 2021

Map Box map not showing on production #1323

Closed

kylebarron mentioned this issue Feb 3, 2021

maps doesn't appear after build the static file react.js #1326

Closed

draperunner added a commit to entur/billettkart that referenced this issue Feb 12, 2021

Downgrade react-map-gl to fix prod error

6c2d558

visgl/react-map-gl#1266

This was referenced Feb 24, 2021

React map gl only displays markers #1368

Closed

fix: map display issue NBNARADHYA/covid-vaccine-distribution#16

Merged

laudickson mentioned this issue Nov 8, 2021

Refactor map component codeforboston/mattapan-mapping#69

Merged

aperkaz added a commit to aperkaz/taggr that referenced this issue Nov 16, 2021

Add craco to fix map bug

c9f9bf5

visgl/react-map-gl#1266

Pessimistress mentioned this issue Jan 21, 2022

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

Closed

alisarf mentioned this issue Jan 28, 2022

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) alisarf/Travel-Site#28

Open

MaciejReimann mentioned this issue Mar 15, 2022

downgrade react-map-gl 5.2.11 ukraine-taskforce/requests-dashboard#33

Merged

Pessimistress mentioned this issue May 9, 2022

[Bug] Using deck.gl with Create React App visgl/deck.gl#6896

Closed

6 tasks

azra-l mentioned this issue Jul 29, 2022

Fix map bug azra-l/festival-fanatic#31

Merged

Beck-berry mentioned this issue Feb 16, 2023

Use ReactJS framework buskerudbyen/cycling-norway#6

Merged

16 tasks

trebor mentioned this issue Apr 1, 2023

the map fails when deployed trebor/sangai#7

Closed

Pessimistress mentioned this issue Apr 27, 2023

[Bug] unable to run with CRA #2167

Closed

hanbyul-here mentioned this issue Mar 21, 2024

Add necessary build setup developmentseed/our-forests-tomorrow#11

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

6.x.x production build error "x is not defined" #1266

6.x.x production build error "x is not defined" #1266

testower commented Dec 18, 2020 •

edited

Loading

Pessimistress commented Dec 18, 2020

testower commented Dec 21, 2020

Velidoss commented Dec 24, 2020

Pessimistress commented Dec 24, 2020 •

edited

Loading

sgup commented Dec 24, 2020

zanemountcastle commented Jan 3, 2021

robinjhuang commented Jan 8, 2021

aditbharadwaj commented Jan 8, 2021

marc-slingshot commented Jan 11, 2021

jiaranda commented Jan 15, 2021

Pessimistress commented Jan 29, 2021

JG145 commented Feb 1, 2021

kentongray commented Feb 1, 2021

JG145 commented Feb 1, 2021 •

edited

Loading

vehere-ccuMaksym commented Feb 6, 2021

Antje3 commented Feb 11, 2021

stevepepple commented Nov 26, 2021

MalikOwais123 commented Dec 24, 2021

sangdth commented Feb 4, 2022 •

edited

Loading

ariel-upstream commented Feb 17, 2022

mohammad6vakili commented Feb 18, 2022

kyuumeitai commented Mar 26, 2022

sloev commented Mar 30, 2022

tclaff commented Apr 11, 2022

dorthwein commented May 10, 2022 •

edited

Loading

strimbob commented Oct 6, 2022 •

edited

Loading

emekaokoli commented Dec 8, 2022

emekaokoli commented Dec 8, 2022

emekaokoli commented Dec 12, 2022

alex-kowalczyk commented Dec 16, 2022

emekaokoli commented Dec 20, 2022 •

edited

Loading

martinjuhasz commented Apr 28, 2023 •

edited

Loading

erlajoua commented Jul 5, 2023

parsatajik commented Oct 23, 2023

6.x.x production build error "x is not defined" #1266

6.x.x production build error "x is not defined" #1266

Comments

testower commented Dec 18, 2020 • edited Loading

Pessimistress commented Dec 18, 2020

testower commented Dec 21, 2020

Velidoss commented Dec 24, 2020

Pessimistress commented Dec 24, 2020 • edited Loading

sgup commented Dec 24, 2020

zanemountcastle commented Jan 3, 2021

robinjhuang commented Jan 8, 2021

aditbharadwaj commented Jan 8, 2021

marc-slingshot commented Jan 11, 2021

jiaranda commented Jan 15, 2021

Pessimistress commented Jan 29, 2021

JG145 commented Feb 1, 2021

kentongray commented Feb 1, 2021

JG145 commented Feb 1, 2021 • edited Loading

vehere-ccuMaksym commented Feb 6, 2021

Antje3 commented Feb 11, 2021

stevepepple commented Nov 26, 2021

MalikOwais123 commented Dec 24, 2021

sangdth commented Feb 4, 2022 • edited Loading

ariel-upstream commented Feb 17, 2022

mohammad6vakili commented Feb 18, 2022

kyuumeitai commented Mar 26, 2022

sloev commented Mar 30, 2022

tclaff commented Apr 11, 2022

dorthwein commented May 10, 2022 • edited Loading

strimbob commented Oct 6, 2022 • edited Loading

emekaokoli commented Dec 8, 2022

emekaokoli commented Dec 8, 2022

emekaokoli commented Dec 12, 2022

alex-kowalczyk commented Dec 16, 2022

emekaokoli commented Dec 20, 2022 • edited Loading

martinjuhasz commented Apr 28, 2023 • edited Loading

erlajoua commented Jul 5, 2023

parsatajik commented Oct 23, 2023

testower commented Dec 18, 2020 •

edited

Loading

Pessimistress commented Dec 24, 2020 •

edited

Loading

JG145 commented Feb 1, 2021 •

edited

Loading

sangdth commented Feb 4, 2022 •

edited

Loading

dorthwein commented May 10, 2022 •

edited

Loading

strimbob commented Oct 6, 2022 •

edited

Loading

emekaokoli commented Dec 20, 2022 •

edited

Loading

martinjuhasz commented Apr 28, 2023 •

edited

Loading