Mapbox blank map React-map-gl | ReactJS

Question

I am using react 17.0.1 and react-map-gl ^6.0.2 i have a map component.

I have tried other libraries and the problem persists
I have contacted support for mapbox
I have contacted other mapbox users

Couldnt solve that

When i do "npm run start" no problem, it shows the map but when i do "npm run build" it only shows this:map blank

And it throws this error : error

My code bellow:

   import React, {useState } from "react";
import ReactMapGL from 'react-map-gl';
const Map = () => {
  const[viewport, setViewport] = useState({
    width: "100%",
    height: "400px",
    latitude: 38.963745,
    longitude: 35.243322,
    zoom: 5
  });
     return (
    <div>
      <h2>Size yakın olan yerleri keşfedin!</h2>
            <ReactMapGL
                 {...viewport}
              onViewportChange={setViewport}
              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
              mapStyle="mapbox://styles/mapbox/streets-v11"
           />
          </div>
           );
        }
     export default Map

Charlie G · Answer 1 · 2021-10-08T00:44:32.170

I know this is an old post..

As I understand it, the cause is that mapbox (not react-map-gl) has a bug in it that does not transpile correctly with "npm build".

Fortunately you do NOT have to eject your app as I learned in this link: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

I had to npm install worker-loader

Then add the following lines.

    // had this.
    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';


    // added the following 6 lines.
    import mapboxgl from 'mapbox-gl';

    // The following is required to stop "npm build" from transpiling mapbox code.
    // notice the exclamation point in the import.
    // @ts-ignore
    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

Since I'm using typescript and linting, I had to add some directives to ignore warnings/errors that would otherwise stop it from compiling.

Note that I did not have to install mapboxgl since react-map-gl uses it.

But, I did need to add eslint-disable-next-line import/no-unresolved

and eslint-disable-next-line import/no-webpack-loader-syntax combined on the same line.

I am using "react-map-gl": "^6.1.17".

Hey man, just wanted to say, i was scouring all over github and mapbox docs for this. None of the "solutions" worked. Just wanted to let you know your comment saved my behind. God bless! — HelpANoobOut, Oct 28 '21 at 07:48
FYI this also works for "mapbox-gl": "^2.7.0" | "react-map-gl": "^7.0.2" — jdl, Feb 25 '22 at 22:20
@MysteryMan, I put it in the file for my map component. I did not have to touch any other files. — Charlie G, Jul 23 '22 at 16:19
Unexpected '!' in 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax. Getting this error in production build. I did the same to what you did. Trying to deploy it in Netlify. — tanjim anim, Sep 20 '22 at 07:03

score 4 · Answer 2 · answered Jan 15 '21 at 21:21

The issue is caused by the transpiler. It's a bug that Mapbox is working on. Follow the suggestions here:

https://github.com/mapbox/mapbox-gl-js/issues/10173

It's also in the official documentation now.

https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

score 3 · Answer 3 · answered May 27 '22 at 00:18

3

Buried in several links posted here is this which solved the problem for me. It fixed the mapbox transpiler bug causing the problem.

// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import mapboxgl from '!mapbox-gl';

answered May 27 '22 at 00:18

David Tunnell

7,252
20
66
124

score 1 · Answer 4 · answered Dec 26 '20 at 10:21

When trying to deploy the app, firstly we run yarn build. This seems to do it's job, no build errors. However, when we actually deploy it, e.g. serve the build. We run in to a 'referenceError: y is not defined'.

When downgrading the version of Mapbox-gl to 1.13.0. The build works just fine. This is what we will have to do until the issue is fixed.

Following steps:

run yarn install or npm install
run yarn build or npm build

score 1 · Answer 5 · edited Jun 15 '21 at 14:04

1

Make width and height in number only

const[viewport, setViewport] = useState({
    width: "100",
    height: "400",
    latitude: 38.963745,
    longitude: 35.243322,
    zoom: 5
});

edited Jun 15 '21 at 14:04

Slava Rozhnev

9,510
6
23
39

answered Jun 15 '21 at 13:34

ketan

163
1
9

score 0 · Answer 6 · answered Nov 07 '22 at 13:59

adding the following to package.json worked for me:

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

score 0 · Answer 7 · answered Dec 26 '22 at 08:38

0

Solution for this issue that worked for me without changing the browserlists:

In Map.js component:

import { workerClass } from 'mapbox-gl';
import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';

workerClass = workerLoader;

in eslintrc:

"import/no-webpack-loader-syntax": "off",
"import/no-unresolved": "off"

answered Dec 26 '22 at 08:38

Morad Abed

25
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 26 '22 at 11:51

Mapbox blank map React-map-gl | ReactJS

7 Answers7

Linked