google maps - tracker - Google no está definido en la aplicación reaccionar usando create-react-app

react google-< maps

Question

Creo una aplicación de reacción usando el cli llamado crear-reaccionar-aplicación. Parece que Facebook hizo muchas cosas debajo, como un paquete web, etc. Sin embargo, creo que también puede tener algunas limitaciones. Intento seguir este tutorial para cargar Google Map Api. Y cuando depuro mi código, puedo ver que el mapa de Google ha sido referenciado exitosamente. .

Pero luego hago clic en jugar y dejo que la aplicación termine de ejecutarse. Tengo Google no se ha definido un error de webpackHotDevClient.js y mi aplicación se bloquea.

Dado que el paquete web compila los archivos sobre la marcha, ¿asumo que tiene problemas para cargar google map a través de https?

¿Alguna idea?

Answer 1

Como se mencionó en la guía del usuario , debe leer explícitamente cualquier variable global desde la window . Ponga esto en la parte superior del archivo y funcionará:

const google = window.google;

La razón por la que aplicamos esto es porque la gente generalmente malentiende la diferencia entre las variables locales, los módulos importados y las variables globales, por lo que siempre queremos dejarlo claro en el código cuando se usa una variable global.

Por cierto, esto no está relacionado con Webpack o HTTPS. Ves esto porque usamos una regla de alineación que prohíbe las variables globales desconocidas.

Answer 2

Creo que la variable de Google ya está disponible cuando importa google map desde un script en html. Este error causado por Eslint, puede intentar agregar la línea de abajo a la parte superior de su archivo para deshabilitar ESlint

/*global google*/

Answer 3

Hola, puedes usar withGoogleMap así:

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);

Answer 4

Tengo una solución mejor que la de @ Dan. Puedes hacerlo así.

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

O

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

Si google está disponible, no hay problema, si no, se asignará vacío hasta que se carguen los scripts.