Map not showing up when using react-map-gl and create-react-app-CodePudding

I am using create react app, along with react-map-gl. I just need the map to show up on the screen right now but all it does is show the mapbox logo and have a blank space where the map should be. Here is my main .js file:

    import './App.css';
    import ReactMapGL from 'react-map-gl';
    import React, {useState} from 'react';

    function App() {
      const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 38.958630,
        longitude: -77.357002,
        zoom: 10
      });
      return (
        <div className="TextStuff">
          <ReactMapGL {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}>MAPPPPP</ReactMapGL>
        </div>
      );
    }

    export default App;

CodePudding user response：

After investigating, I came to the conclusion that your token is not properly passed to your component, through the process.env. I created a reproducible example, with a working token, and it is working like a charm. I am getting the same result as you when providing an invalid token. So I guess that you are getting and undefined token, or something like this.

Following this tutorial, you should have an .env file, where you store your token like this: REACT_APP_MAPBOX_TOKEN=MYTOKEN

Try to log out your process.env.REACT_APP_MAPBOX_TOKEN, to see what you are getting.

But what I suspect, is that you put the .env file in your src folder. But you shouldn't put it there. Instead, put it at the root of your project, and then restart your server. This way, you should get your token correctly.