I am using react-gl library to use the map-api using mapbox. I have created an account mapbox as well still it is showing the error depicted in the picture.

Here is my code for app.js

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      }}
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
      style={{width: 600, height: 400}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
    />
  );
}

export default App

Here is the error:

I am using react-gl library to use the map-api using mapbox. I have created an account mapbox as well still it is showing the error depicted in the picture.

Here is my code for app.js

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      }}
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
      style={{width: 600, height: 400}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
    />
  );
}

export default App

Here is the error:

• javascript
• reactjs
• mapbox-gl
• react-map-gl

• check your mapbox api token – Dharmik Patel Commented Mar 25, 2022 at 5:07
• Its correct , I have authenticated it as well! – Tanvesh Commented Mar 25, 2022 at 5:08
• check what the value of mapboxApiAccessToken is – Bravo Commented Mar 25, 2022 at 5:10
• what about if you use mapboxApiAccessToken="{process.env.REACT_APP_MAPBOX}" - check that process.env.REACT_APP_MAPBOX is correct – Bravo Commented Mar 25, 2022 at 5:11
• Still same issue :( – Tanvesh Commented Mar 25, 2022 at 5:14

2 Answers 2

I faced the same problem. You must to change mapboxApiAccessToken to mapboxAccessToken.

Big shout out to Dani Pérez. Apparently his answer is correct. Just to add on to his answer, in react-map-gl v7.0, they decided to rename various props and one of those props is mapboxApiAccessToken

Renamed props for better consistency with the wrapped library:

• mapboxApiAccessToken is now mapboxAccessToken

This is mentioned in their Upgrade guide: https://visgl.github.io/react-map-gl/docs/upgrade-guide