React应用无法识别Mapbox Token问题求助

架构老林

2026-8-21

Mapbox GL API Token 报错排查与解决

已在React应用的.env文件中配置Mapbox Token，但始终报错：index.js:1 Error: An API access token is required to use Mapbox GL.

业务代码如下：

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;

.env文件配置：

REACT_APP_MAPBOX_TOKEN="pk.abcdef"

排查方向及解决办法

.env格式错误
你给Token加了双引号，React读取时会把引号当作Token的一部分，导致Mapbox识别无效。直接去掉引号：
```
REACT_APP_MAPBOX_TOKEN=pk.abcdef
```
环境变量未加载
React开发服务器不会自动读取新增的.env变量，必须重启服务才能生效。关闭当前运行的服务，重新执行npm start或yarn start。
mapboxgl基础库未配置Token
你直接导入了mapboxgl，这个底层库需要单独配置Token，react-map-gl的props配置不会同步到这里。在组件里加一段初始化代码：
```
useEffect(() => {
  mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
}, []);
```
.env文件位置不对
确认.env文件放在项目根目录（和package.json同级），子目录下的.env不会被React识别。
变量名拼写错误
检查代码中调用的process.env.REACT_APP_MAPBOX_TOKEN和.env里的变量名是否完全一致，注意大小写和前缀REACT_APP_不能少。