google이 create-display-app을 사용하는 리액트 앱에 정의되어 있지 않습니다.

google이 create-display-app을 사용하는 리액트 앱에 정의되어 있지 않습니다.

create-react-app이라는 CLI를 사용하여 리액트 앱을 만듭니다.Facebook은 웹팩 등 밑에서 많은 일을 한 것 같아요.하지만, 몇 가지 한계도 있을 수 있다고 생각합니다.저는 이 튜토리얼에 따라 구글 맵 API를 로드하려고 합니다.코드를 디버깅하면 구글 맵이 정상적으로 참조되고 있는 것을 알 수 있습니다.

그 후 [재생]을 클릭하여 응용 프로그램 실행을 종료합니다.webpack에서 google is not defined 오류 발생HotDevClient.js 및 응용 프로그램이 크래시됩니다.

webpack은 파일을 바로 컴파일하기 때문에 https로 구글 맵을 로드하는 것은 곤란하다고 생각합니다.

무슨 생각 있어?

유저 가이드에 기재되어 있듯이, 다음의 글로벌 변수를 명시적으로 읽어낼 필요가 있습니다.window. 이 파일을 파일 맨 위에 놓으면 다음과 같이 동작합니다.

const google = window.google;

이를 강제하는 이유는 사람들이 로컬 변수, Import된 모듈 및 글로벌 변수의 차이를 오해하고 있기 때문에 글로벌 변수를 사용할 때는 항상 코드로 명확하게 하고 싶기 때문입니다.

참고로 이것은 Webpack이나 HTTPS와는 관련이 없습니다.이것은 불분명한 글로벌 변수를 금지하는 보풀링 규칙을 사용하고 있기 때문입니다.

html 스크립트에서 구글 맵을 Import 할 때 이미 구글 변수를 사용할 수 있다고 생각합니다.이 에러는, Eslint 에 의해서 발생합니다.아래 행을 파일 상단에 추가하여 ESlint 를 무효로 할 수 있습니다.

/*global google*/

@Dan's보다 더 나은 해결책이 있습니다.이렇게 하면 됩니다.

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

또는

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

한다면google사용할 수 있으면 문제가 없습니다.그렇지 않으면 스크립트가 로드될 때까지 빈 객체가 일시적으로 할당됩니다.

경우에.es-lint정의되지 않은 Google 오류를 발생시키고 eslint 설정 파일의 글로벌을 업데이트합니다.

{
    "globals": {
        "google": "readonly"
    }
}

또는

특정 파일 사용 사례에 대해서는 파일 상단에 다음과 같이 정의하십시오.

/*global google*/

안녕, 쓸 수 있어withGoogleMap다음과 같이 합니다.

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);

.eslintrc.json

{
    // ...
    "globals": {
     "google": "readonly"
    }
}

yarn add @types/googlemaps 

또는

npm i --save @types/googlemaps

언급URL : https://stackoverflow.com/questions/43714895/google-is-not-defined-in-react-app-using-create-react-app