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

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

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

Answer 3

Make width and height in number only

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