谷歌没有在使用 create-react-app 的反应应用程序中定义

Posted 2023-02-22

【中文标题】谷歌没有在使用 create-react-app 的反应应用程序中定义

【英文标题】：google is not defined in react app using create-react-app

【发布时间】：2017-09-28 14:52:52

【问题描述】：

我使用名为 create-react-app 的 cli 创建了一个 react 应用程序。看起来 Facebook 在底层做了很多事情，比如 webpack 等。但是，我想它也可能有一些限制。我尝试关注this tutorial 来加载谷歌地图 api。而且在调试代码的时候，可以看到google map已经被成功引用了。.

然后我单击播放并让应用程序完成运行。我从 webpackHotDevClient.js 得到 google is not defined 错误，我的应用程序崩溃了。

由于 webpack 动态编译文件，我认为通过 https 加载谷歌地图有问题？

有什么想法吗？

【问题讨论】：

你的.eslintrc是什么样的？

Create React App 不支持自定义 ESLint 配置，所以这个注释在这种情况下不是很相关。

【参考方案1】：

如user guide 中所述，您需要从window 显式读取任何全局变量。把它放在文件的顶部，它就会起作用：

const google = window.google;

我们强制执行此操作的原因是因为人们通常会误解局部变量、导入模块和全局变量之间的区别，因此我们希望在您使用全局变量时始终在代码中明确说明。

顺便说一句，这与 Webpack 或 HTTPS 无关。您会看到这一点，因为我们使用了禁止未知全局变量的 linting 规则。

【讨论】：

很高兴知道。感谢回复

我在 Vue.js 和 Nuxt.js 中遇到了同样的问题。你的回答也对我有用。

谢谢，我在使用 react-geosuggest 时遇到了这个问题，你的回答对我有帮助。

我试过这个，但是我得到一个错误，说将导入放在文件的顶部。把它放在导入下面是行不通的。所以我不得不在顶部使用 /* global google */。

嗨，丹，刚才我在您的“用户指南”链接中搜索了 [窗口、全局、显式]，但结果为空。有关此信息的信息是否转移到其他地方？

【参考方案2】：

我认为当您从 html 中的脚本导入 google 地图时，google 变量已经可用。此错误由 Eslint 引起，您可以尝试在文件顶部添加以下行以禁用 ESlint

/*global google*/

【参考方案3】：

您好，您可以像这样使用withGoogleMap：

import  withGoogleMap, GoogleMap, Marker, InfoWindow  from "react-google-maps";

const google = window.google;

class MapComponent extends Component 
....

<GoogleMap>
.....
.....
.....
</GoogleMap>

export default withGoogleMap(MapComponent);

【参考方案4】：

我有一个比@Dan 更好的解决方案，你可以这样做

window.google = window.google ? window.google : 

或

const google = window.google = window.google ? window.google : 

如果google 可用，则没有问题，如果没有，则在加载脚本之前将分配为空。

【讨论】：

是的，只有这个有效，因为我将 window.google 设置为未定义，然后运行时错误

【参考方案5】：

.eslintrc.json

    // ...
    "globals": 
     "google": "readonly"