Why cant my react app detect my mapbox token?

Question

I have added a token in my react app using the .env file. No matter what I do I still get an error (index.js:1 Error: An API access token is required to use Mapbox GL.)

This is my code:

import mapboxgl from '!mapbox-gl';
import {Marker} from 'react-map-gl';

import React, { useRef, useEffect, useState } from 'react';
import "./Mapstyle.css";
import { createRef } from 'react';
import mpi from '../mediafiles/mpi.png'
import ReactMapGL from 'react-map-gl';
/* eslint import/no-webpack-loader-syntax: off */

function Map(){
  const [mapInfo, setMapInfo] = useState({})
   
  let [viewport, setViewport] = useState({
    latitude: -73.9739,
    longitude: 40.7549,
    zoom:11.88,
  })

  const nycMap = (
    <ReactMapGL
      {...viewport}
      width="100%"
      height="100vh"
      onViewportChange={(newViewport) => setViewport(newViewport)}
      mapStyle="mapbox://styles/eccatoe2517/cl15qreja000515o1mzsnxhyr"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    />
  )
     
  return (
    <>
      <h1>Map</h1>
      {nycMap}
    </>
  );
}
export default Map;

I don't know if the issue is in my .env file but

REACT_APP_MAPBOX_TOKEN="pk.abcdef"

https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens. Here they describe that you should rename your env var to: REACT_APP_MAPBOX_ACCESS_TOKEN. Now it will be automatically recognized — Huhngut, Aug 24 '22 at 08:03

score 0 · Accepted Answer · answered Aug 24 '22 at 08:05

This is from the documentation of react-map-gl, the correct props should be mapboxAccessToken instead of mapboxApiAccessToken:

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

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: '100vw', height: '100vh'}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    mapboxAccessToken="MY_ACCESS_TOKEN"
  />;
}

Why cant my react app detect my mapbox token?

1 Answers1