webpack 未使用create-react-app在react应用程序中定义google

wa7juj8i  于 2022-11-13  发布在  Webpack
关注(0)|答案(5)|浏览(250)

我用create-react-app创建了一个react应用。看起来Facebook在下面做了很多事情,比如webpack等等。但是,我想它可能也有一些限制。我试着按照this tutorial来加载谷歌MapAPI。当我调试代码时,我可以看到谷歌Map已经被成功引用了。x1c 0d1x。
但是,然后我点击播放,让应用程序完成运行。我得到了谷歌是没有定义的错误,从webpackhotdevclientiderjs和我的应用程序崩溃。

由于webpack编译文件的飞行,我假设它有麻烦加载谷歌Map通过https?
有什么想法吗?

laximzn5

laximzn51#

正如用户指南中提到的,你需要显式地从window中读取任何全局变量,把它放在文件的顶部,它就会工作:

const google = window.google;

我们之所以强制这样做是因为人们通常会误解局部变量、导入模块和全局变量之间的区别,因此我们希望在使用全局变量时始终在代码中明确这一点。
顺便说一句,这与Webpack或HTTPS无关。你看到这一点是因为我们使用了一个禁止未知全局变量的限制规则。

lstz6jyr

lstz6jyr2#

我认为当你从html中的脚本导入谷歌Map时,谷歌变量已经可用了。这个错误是由Eslint引起的,你可以尝试将下面的行添加到你的文件顶部以禁用ESlint

/*global google*/
qgelzfjb

qgelzfjb3#

我有个更好的办法@Dan 's你可以这样做

window.google = window.google ? window.google : {}

const google = window.google = window.google ? window.google : {}

如果google可用,则没有问题;如果不可用,则将临时分配空对象,直到加载脚本。
如果es-lint抛出未定义的google错误,请更新eslint配置文件中的全局变量:

{
    "globals": {
        "google": "readonly"
    }
}


对于特定的文件用例,在文件顶部定义如下

/*global google*/
pqwbnv8z

pqwbnv8z4#

您可以像这样使用withGoogleMap

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);
6qftjkof

6qftjkof5#

.eslintrc.json

{
    // ...
    "globals": {
     "google": "readonly"
    }
}

相关问题