react-map-gl环境变量无法传递Mapbox API令牌问题求助

问题场景 #

在 Next.js 12.2.2 环境下使用 react-map-gl 时，尝试通过环境变量配置 Mapbox API 令牌，但地图无法渲染，控制台抛出错误：

next-dev.js?3515:24 Error: An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes
    at t.RequestManager._makeAPIURL (mapbox-gl.js?0c80:31:423135)
    at t.RequestManager.normalizeStyleURL (mapbox-gl.js?0c80:31:420958)
    at ei.loadURL (mapbox-gl.js?0c80:35:102600)
    at Map._updateStyle (mapbox-gl.js?0c80:35:458753)
    at Map.setStyle (mapbox-gl.js?0c80:35:458172)
    at new Map (mapbox-gl.js?0c80:35:448583)
    at Mapbox._initialize (mapbox.js?699b:222:1)
    at new Mapbox (mapbox.js?699b:128:1)
    at eval (map.js?48e9:61:1)

无效的尝试方案 #

1. 在 .env 文件中配置变量：

NEXT_PUBLIC_MAPBOX_API="my-secret-mapbox-gl-api-key"

组件中调用：

mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API}

重启开发服务器后问题依旧。

2. 改用 React 项目常用的前缀变量：

REACT_APP_MAPBOX_ACCESS_TOKEN="my-secret-mapbox-gl-api-key"

组件中调用：

mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}

问题仍未解决。

3. 验证令牌有效性：硬编码令牌到组件中，地图可正常渲染，说明令牌本身无问题：

<Map
  initialViewState={{
    longitude: 21.338631,
    latitude: 50.102242,
    zoom: 11,
  }}
  style={{
    overflow: "hidden",
  }}
  mapStyle={mapboxThemeStyle}
  mapboxAccessToken="my-secret-api-token-without-env-and-it-works"
  id="map"
  tabIndex="-1"
>
  <Marker
    longitude={21.338631}
    latitude={50.102242}
    color="#206ea0"
  />
</Map>

最终解决办法 #

创建或编辑 .env.local 文件，配置带 NEXT_PUBLIC_ 前缀的环境变量：

NEXT_PUBLIC_MY_MAPBOX_API_TOKEN="pk.xxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx-xxxxxxxxxx"

在组件中对应调用该变量：

mapboxAccessToken={process.env.NEXT_PUBLIC_MY_MAPBOX_API_TOKEN}

重启开发服务器后，地图即可正常渲染。

内容的提问来源于stack exchange，提问作者xxxbud