CODEWITHSUNDEEP
google-mapsreactjswebpackcreate-react-app
eded
eded

Reputation: 3958

google is not defined in react app using create-react-app

I create a react app using the cli called create-react-app. Look like Facebook did lots of things underneath, such as webpack etc. However, I guess it may also has some limitations. I try to follow this tutorial to load google map api. And when I debug my code, I can see the google map has been successfully referenced.enter image description here.

But then I click play and let application finishes running. I got google is not defined error from webpackHotDevClient.js and my application crashes.

enter image description here

enter image description here

Since webpack compile the files on the fly, I assume it has trouble to load google map via https?

Any thoughts?

Upvotes: 40

Views: 48392

Answers (7)

Omar
Omar

Reputation: 31

If you are using React, you can use it like this eg.

function RenderGoogleButton (){
    function handleCallbackResponse(response) {
        console.log("CredencialJWT:  "+response.credential)
    }

    useEffect(() => {
        const google = window.google  //check this
        google.accounts.id.initialize({
            client_id: YOUR_CLIENT_ID,
            callback: handleCallbackResponse
        })

        google.accounts.id.renderButton(
            document.getElementById("signInDiv"),
            { theme: "outline", size: "large" }
        )
        console.log("RenderGoogleButton")
    }, [])        
    return (<div id="signInDiv"></div>)
}

Note: const google = window.google or /* global google */ both are correct. On the above eg. I used the first one.

Upvotes: 0

ebed meleck
ebed meleck

Reputation: 373

yarn add @types/googlemaps

OR

npm i --save @types/googlemaps

Upvotes: 0

Black Mamba
Black Mamba

Reputation: 15615

I have a better solution then @Dan's you can do it like this

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

OR

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

If google is available then no problem if not then empty Object will be temporarily assigned till your scripts are loaded.

In case es-lint throws undefined google error, update the globals in eslint configuration file:

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

OR

For a specific file use case define like below on the top of the file

/*global google*/

Upvotes: 8

Lucas Breitembach
Lucas Breitembach

Reputation: 1683

.eslintrc.json

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

Upvotes: 1

Undefined
Undefined

Reputation: 51

Hi you can use withGoogleMap like so: 

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);

Upvotes: 5

voquockhanh
voquockhanh

Reputation: 366

I think the google variable is already available when you import google map from script in html. This error caused by Eslint, you can try and add the below line to the top of your file to disable ESlint

/*global google*/

Upvotes: 17

Dan Abramov
Dan Abramov

Reputation: 268323

As mentioned in the user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:

const google = window.google;

The reason we enforce this is because people commonly misunderstand the difference between local variables, imported modules, and global variables, and so we want to always make it clear in the code when you use a global variable.

By the way, this is not related to Webpack or HTTPS. You see this because we use a linting rule that forbids unknown global variables.

Upvotes: 89

Related Questions