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.

1. I have tried other libraries and the problem persists
2. I have contacted support for mapbox
3. 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

Answer 1

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

Answer 2

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