Google не определен в приложении для реагирования, используя приложение create-react-app

Я создаю приложение для реагирования, используя cli, называемое create-react-app. Похоже, что Facebook сделал много вещей внизу, например, веб-пакет и т.д. Однако, я думаю, это может также иметь некоторые ограничения. Я пытаюсь следовать этому руководству, чтобы загрузить google map api. И когда я отлаживаю свой код, я вижу, что карта google была успешно указана. .

Но затем я нажимаю play и позволяю приложению заканчивать работу. У меня google не определена ошибка из webpackHotDevClient.js, и мое приложение аварийно завершает работу.

Поскольку webpack компилирует файлы "на лету", я предполагаю, что у него есть проблемы с загрузкой карты google через https?

Есть предположения?

Ответ 1

Как указано в руководстве пользователя, вам нужно явно прочитать любые глобальные переменные из window. Поместите это в начало файла, и он будет работать:

const google = window.google;

Причина, по которой мы соблюдаем это, заключается в том, что люди обычно неправильно понимают разницу между локальными переменными, импортированными модулями и глобальными переменными, поэтому мы хотим, чтобы в коде всегда указывалось, когда вы используете глобальную переменную.

Кстати, это не связано с Webpack или HTTPS. Вы видите это, потому что мы используем правило линии, которое запрещает неизвестные глобальные переменные.

Ответ 2

Я думаю, что переменная google уже доступна, когда вы импортируете карту google из скрипта в html. Эта ошибка, вызванная Eslint, вы можете попробовать добавить нижнюю строку в начало файла, чтобы отключить ESlint

/*global google*/

Ответ 3

У меня есть лучшее решение, после чего @Dan вы можете сделать это, как это

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

ИЛИ

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

Если google доступен, тогда никакая проблема, если не будет пустой, будет назначена до загрузки ваших скриптов.

Ответ 4

Привет, вы можете использовать withGoogleMap так:

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);