0

I'm using react-map-gl to integrate Mapbox into my project. My Map component looks like this:

import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function Map() {
  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY}
      onViewportChange={nextViewport => setViewport(nextViewport)}
    />
  );
}

export default Map;

I'm getting a "no token warning" and my map doesn't display. If I swap out process.env.REACT_APP_MAPBOX_KEY with the actual string key it works fine. Why can't I use a variable in my .env file and pass it to mapboxApiAccessToken?

In my .env file my key variable looks like this: REACT_APP_MAPBOX_KEY=the actual string here

Why doesn't this work?

Nick Kinlen
  • 1,356
  • 4
  • 30
  • 58

1 Answers1

0

Do not use process.env it not work for react-map-gl direct paste token it works fine

sourabh patole
  • 1
  • 2
  • 2
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 08 '22 at 13:47