next.js - 为什么 mapbox-gl-js 无法正确解析 env 变量令牌？

Question

在最新版本的 Next 中构建。已安装 mapbox-gl-js。创建了一个 .env 文件：

MapboxAccessToken=my_special_token

我有一个带有基本模板的 map.js 组件，它使用以下内容引入该变量：

import { useState } from "react";
import ReactMapGL from 'react-map-gl';


const MapView = () => {
    const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 37.7577,
        longitude: -122.4376,
        zoom: 8
    });
    console.log(process.env.MapboxAccessToken)
    return ( 
        <div>
            <ReactMapGL {...viewport} mapboxApiAccessToken={process.env.MapboxAccessToken} />
        </div>
     );
}
 
export default MapView;

控制台日志显示了实际的令牌，所以我知道它把它拉进来了。

但是，这不会产生地图和错误，“需要有效的 API 令牌才能使用 Mapbox 数据。”

<ReactMapGL {...viewport} mapboxApiAccessToken={process.env.MapboxAccessToken} />

但是当我将令牌作为字符串放入如下时，地图就会生成。

<ReactMapGL {...viewport} mapboxApiAccessToken="my_special_token" />

我当然重新启动了开发服务器，其他环境变量工作得很好。不确定 Mapbox 是否正在寻找独特的东西，但他们的文档没有认识到这个问题。

任何人都知道为什么传递的 env 变量不起作用但文字字符串起作用？

标签： next.jsmapbox-gl-js