Valid Mapbox Token is required but I don't work

Question

I try to set up an react app with an integrated map of mapbox. When I start the app, it says that the access token isn't valid. But I used the public token on the website.

VM68 react_devtools_backend.js:4061 Error: **A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/**
    at $t.errorCb (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679:240)
    at $t.getSessionAPI (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900:22)
    at Map._authenticate (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676:13)
    at Map._render (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645:91)
    at Map.map._render (bundle.js:34693:17)
    at vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737:73
overrideMethod @ VM68 react_devtools_backend.js:4061
onError @ bundle.js:33707
Mapbox._onEvent @ bundle.js:34564
fire @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:1203
_fireEvent @ bundle.js:34996
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679
getSessionAPI @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900
_authenticate @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676
_render @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645
map._render @ bundle.js:34693
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737

I created an .env.local and connected it with my App.js. So I don't understand why this is not working. Here is my App.js:

import React, {useState} from "react";
import ReactMapGL from "react-map-gl";



export default function App() {
  const [viewport,setViewport] = useState ({
    longitude:-9.993682,
    latitude: 53.551086,
    zoom: 9,
    width: '100vw',
    height: '100 vh',
  });

  return (
    <div>
      <ReactMapGL
        {...viewport} mapboxApiAccessToken= {process.env.REACT_APP_MAPBOX_TOKEN}>
      </ReactMapGL>
    </div>
  );
}

On the website happens only one thing: A little grey square that hovers on click but I was supposed to show a map...

Anyone here who can help?

This is my .env.local:

REACT_APP_MAPBOX_TOKEN="pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q"

This is my Folder structure:

Folderstructure

Answer 1

You have to provide the REACT_APP_MAPBOX_TOKEN without the quotation marks: REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q

For people not to abuse your Mapbox Token, you should consider generating a new one.