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

我有一个

create react应用程序

，它正在使用dotenv隐藏Google Maps API密钥，但是当我尝试此操作时，我无法加载地图：我收到一个错误，说

Google Maps API错误：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\u APP\u GOOGLE\u MAPS\u KEY=myapikey

在我的app.js文件中，我将google道具传递给我的

MapContainer

组件，该组件位于我的渲染方法中，用于加载地图本身。是否与dotenv存在某种冲突，并且能够读取

googlemaps react

API键

我已经尝试过在这里搜索答案，但遇到了以下问题：

---

但是，即使在多次重新启动服务器后，我仍然会返回相同的错误以及

控制台.log（apiKey）

的

未定义的
。
对于任何对此有困难的人，有一个名为google map react（缺少“s”）的替代库，它似乎可以很好地处理.env变量

如果您使用的是
create-react-app
，我相信您不需要
require（'dotenv'）.config（）
。你试过删除吗？@Thole我刚才试过，但仍然收到相同的错误。如果我从
App.js
中删除该行，我是否需要以某种方式更改我的
.env
，比如格式并可能将其导出为配置对象？还是应该像我已经格式化的那样好呢？只要一行文本就可以了
REACT\u APP\u GOOGLE\u MAPS\u KEY=myapikey
。很奇怪。您使用哪个版本的
create react app
创建项目@Thole我正在使用
create react app
的
1.0.0
版本。我还使用了
react
的
15.6.1
版本。啊，所以我应该试着用那个版本升级，然后再试一次？我不确定它是否可以工作。指示您只需更新
react scripts
：“在大多数情况下，在
package.json
中碰撞
react scripts
版本并在此文件夹中运行
npm install
就足够了，但最好查阅变更日志以了解可能出现的破坏性更改。”