webentwicklung-frage-antwort-db.com.de

google ist in der reaktions-app mit create-react-app nicht definiert

Ich erstelle eine Reaktions-App mit der cli create-react-app. Es sieht so aus, als hätte Facebook darunter viele Dinge getan, wie zum Beispiel das Webpack usw. Allerdings kann es auch einige Einschränkungen geben. Ich versuche, dieses Tutorial zu folgen, um Google Map API zu laden. Und wenn ich meinen Code debugge, kann ich sehen, dass auf die Google Map erfolgreich verwiesen wurde. enter image description here .

Aber dann klicke ich auf "Abspielen" und lasse die Anwendung fertig laufen. Ich habe Google ist kein definierter Fehler von webpackHotDevClient.js und meine Anwendung stürzt ab.

enter image description here

enter image description here

Da Webpack die Dateien im laufenden Betrieb kompiliert, gehe ich davon aus, dass es Probleme beim Laden von Google Map über https gibt.

Irgendwelche Gedanken?

google-mapsreactjswebpackcreate-react-app
23
eded

Wie im Benutzerhandbuch erwähnt, müssen Sie alle globalen Variablen explizit aus window lesen. Fügen Sie dies oben in die Datei ein und es wird funktionieren:

const google = window.google;

Der Grund, warum wir dies erzwingen, liegt darin, dass die Leute häufig den Unterschied zwischen lokalen Variablen, importierten Modulen und globalen Variablen missverstehen. Deshalb möchten wir im Code immer klarstellen, wenn Sie eine globale Variable verwenden.

Dies hat übrigens nichts mit Webpack oder HTTPS zu tun. Sie sehen dies, weil wir eine Flusenregel verwenden, die unbekannte globale Variablen verbietet.

51
Dan Abramov

Ich denke, die Google-Variable ist bereits verfügbar, wenn Sie Google Map aus einem Skript in HTML importieren. Wenn dieser Fehler durch Eslint verursacht wird, können Sie versuchen, die folgende Zeile oben in Ihre Datei einzufügen, um ESlint zu deaktivieren

/*global google*/
4
voquockhanh

Hallo, Sie können withGoogleMap folgendermaßen verwenden:

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

Ich habe eine bessere Lösung als bei Dan, du kannst es so machen

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

OR

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

Wenn google verfügbar ist, ist es kein Problem, wenn nicht, wird leer zugewiesen, bis Ihre Skripte geladen sind.

3
Black Mamba