尝试使用 dotenv 在创建-反应应用程序中隐藏 API 密钥时，无法加载 google-maps-react map

Question

我有一个使用 dotenv 隐藏谷歌地图 API 密钥的create-react-app，但是当我尝试这样做时，我无法加载地图：我收到一个错误说Google Maps API error: InvalidKeyMapError.我之前能够让它工作，但这是公开的 API 密钥。

这是我的文件中的内容。在App.js：

import React, { Component } from 'react'
import { GoogleApiWrapper } from 'google-maps-react'
require('dotenv').config()
const apiKey = `${process.env.REACT_APP_GOOGLE_MAPS_KEY}`
console.log(apiKey)
...
export default GoogleApiWrapper({
apiKey: apiKey,
})(App)

在我的.env文件中，我有：REACT_APP_GOOGLE_MAPS_KEY=myapikey

在我的应用程序中.js文件中，我将谷歌道具传递给我的MapContainer组件，该组件位于我的渲染方法中，用于加载地图本身。是否与 dotenv 和能够读取google-maps-reactAPI 密钥存在某种冲突？

我已经尝试在这里寻找答案并遇到了这个：如何在创建-反应-应用程序中隐藏 API 密钥？

但是，即使多次重新启动服务器，我也会收到相同的错误以及console.log(apiKey)的undefined。

Answer 1

对于任何为此苦苦挣扎的人，有一个名为google-map-react的替代库(缺少"s"(，它似乎可以很好地处理.env变量

https://github.com/google-map-react/google-map-react