web-dev-qa-db-ja.com

googleはcreate-react-appを使用する反応アプリで定義されていません

Create-react-appというcliを使用して、reactアプリを作成します。 Facebookはwebpackなど、その下で多くのことを行ったように見えますが、いくつかの制限があるかもしれません。私は このチュートリアル に従ってGoogleマップAPIをロードしようとします。そして、コードをデバッグすると、Googleマップが正常に参照されていることがわかります。 enter image description here 。

ただし、[再生]をクリックして、アプリケーションの実行を終了します。 webpackHotDevClient.jsからgoogle is not definedエラーが発生し、アプリケーションがクラッシュしました。

enter image description here

enter image description here

Webpackはオンザフライでファイルをコンパイルするため、https経由でGoogleマップをロードするのに問題があると思いますか？

何かご意見は？

google-mapsreactjswebpackcreate-react-app
23
eded

ユーザーガイド で述べたように、windowからグローバル変数を明示的に読み取る必要があります。これをファイルの先頭に置くと動作します：

const google = window.google;

これを実施する理由は、人々が一般的にローカル変数、インポートされたモジュール、グローバル変数の違いを誤解しているためです。

ところで、これはWebpackやHTTPSとは関係ありません。これは、未知のグローバル変数を禁止するリンティング規則を使用しているためです。

51
Dan Abramov

Htmlのスクリプトからgoogleマップをインポートすると、google変数は既に使用可能になっていると思います。このエラーはEslintが原因で、ファイルの先頭に以下の行を追加して、ESlintを無効にすることができます。

/*global google*/
4
voquockhanh

こんにちは、次のようにwithGoogleMapを使用できます。

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);
3
Undefined

私は@Danよりも良い解決策を持っています

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

OR

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

googleが使用可能な場合、スクリプトがロードされるまで、問題がなければ空が割り当てられます。

3
Black Mamba