web-dev-qa-db-fra.com

Google n'est pas défini dans l'application React à l'aide de create-react-app

Je crée une application React en utilisant le cli appelé create-react-app. On dirait que Facebook a fait beaucoup de choses en dessous, comme le webpack, etc. Cependant, je suppose qu'il peut aussi avoir des limites. J'essaie de suivre ce tutoriel pour charger l'api google map. Et quand je débogue mon code, je peux voir que la carte Google a été référencée avec succès . enter image description here .

Mais ensuite je clique sur play et laisse l'application se terminer. J'ai obtenu google n'est pas une erreur définie de webpackHotDevClient.js et mon application se bloque.

enter image description here

enter image description here

Depuis que webpack compile les fichiers à la volée, je suppose qu'il a du mal à charger google map via https?

Des pensées?

google-mapsreactjswebpackcreate-react-app
23
eded

Comme mentionné dans le guide de l'utilisateur , vous devez lire explicitement toutes les variables globales de window. Mettez ceci en haut du fichier et cela fonctionnera:

const google = window.google;

La raison pour laquelle nous appliquons cela est parce que les gens comprennent généralement mal la différence entre les variables locales, les modules importés et les variables globales, et nous voulons donc toujours être clairs dans le code lorsque vous utilisez une variable globale.

Soit dit en passant, cela n'est pas lié à Webpack ou HTTPS. Vous voyez cela parce que nous utilisons une règle de peluchage qui interdit les variables globales inconnues.

51
Dan Abramov

Je pense que la variable google est déjà disponible lorsque vous importez google map à partir d'un script en html. Cette erreur causée par Eslint, vous pouvez essayer d'ajouter la ligne ci-dessous en haut de votre fichier pour désactiver ESlint

/*global google*/
4
voquockhanh

Salut, vous pouvez utiliser withGoogleMap comme ceci:

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

J'ai une meilleure solution que celle de @ Dan, vous pouvez le faire comme ça

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

OR

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

Si google est disponible, aucun problème sinon, alors vide sera attribué jusqu'à ce que vos scripts soient chargés.

3
Black Mamba