How to solve that A valid Mapbox access token is required to use Mapbox GL JS?

Question

Here is my code and the result is none.

import React, {Component} from 'react';
import ReactMapBox from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

class MapExample1 extends Component {
    state = {
        viewport: {
            width: "100vw",
            height: "100vh",
            latitude: 42.430472,
            longitude: -123.334102,
            zoom: 16
        }
    };
    render() {
        console.log("Entering console.log in MapExample1.js ");
        return (
            <ReactMapBox
                {...this.state.viewport}
                onViewportChange={(viewport => this.setState(viewport))}
                mapboxApiAccessToken=
                 'pk.eyJ1Ijoicm95Y2VtYXJ0aW4iLCJhIjoiY2wzODk0bmp3MDc4YjNpbnphNzRzODR1YSJ9.peCCwkWoX_RHseUf2WI1Xw'
            />
        );
    }
}

export default MapExample1;

But the resulted error is [Error: A valid map box access token is required to use map box GL JS.] in console inspect.

Answer 1

Sadly, Mapbox decided that some of their libraries need to use Mapbox access token for all map views.

This is the case for the famous Mapbox GL JS.

More info could be found at the 2.0.0 release page: https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0

The concrete paragraph where this is stated is this one:

Beginning with v2.0.0, a billable map load occurs whenever a Map object is initialized. Before updating an existing implementation from v1.x.x to v2.x.x, please review the pricing documentation to estimate expected costs.

And I believe, based on what I read on react-map-gl GIT page, is the same for that other library, which I think is the one you're using.

The related paragraph on react-map-gl GIT page:

About Mapbox Tokens

To show maps from a service such as Mapbox you will need to register on their website in order to retrieve an access token required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.

Answer 2

If your react-map-gl version is earlier than v7.0, the prop is:

mapboxApiAccessToken=YOUR_ACCESS_TOKEN

If your react-map-gl version is v7.0 or later, the prop is

mapboxAccessToken=YOUR_ACCESS_TOKEN

Source: https://github.com/visgl/react-map-gl/blob/29aa2098febf1e6b8bbfd2caecb3745b3d4d82a9/docs/upgrade-guide.md