Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught ReferenceError: google is not defined

See original GitHub issue

Hi!

PROBLEM: react-google-maps throws an exception when initialized with no internet access. SYMPTOMS: When I don’t have access to internet, following exception is being thrown when trying to access page, which uses react-google-maps:

app.js:39617 GET https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places net::ERR_INTERNET_DISCONNECTED
create @ app.js:39617
loading @ app.js:39600
(anonymous) @ app.js:39563
every @ app.js:39558
each @ app.js:39562
(anonymous) @ app.js:39586
setTimeout (async)
$script @ app.js:39585
componentDidMount @ app.js:29610
commitLifeCycles @ lib.js:10997
commitAllLifeCycles @ lib.js:12173
callCallback @ lib.js:2265
invokeGuardedCallbackDev @ lib.js:2304
invokeGuardedCallback @ lib.js:2161
commitRoot @ lib.js:12277
performWorkOnRoot @ lib.js:13244
performWork @ lib.js:13194
requestWork @ lib.js:13105
scheduleWorkImpl @ lib.js:12959
scheduleWork @ lib.js:12916
scheduleTopLevelUpdate @ lib.js:13420
updateContainer @ lib.js:13458
(anonymous) @ lib.js:17585
unbatchedUpdates @ lib.js:13329
renderSubtreeIntoContainer @ lib.js:17584
render @ lib.js:17649
2../Main @ app.js:125
s @ app.js:1
e @ app.js:1
(anonymous) @ app.js:1
app.js:39806 Warning: Make sure you've put a <script> tag in your <head> element to load Google Maps JavaScript API v3.
 If you're looking for built-in support to load it for you, use the "async/ScriptjsLoader" instead.
 See https://github.com/tomchentw/react-google-maps/pull/168
warning @ app.js:39806
handleComponentMount @ app.js:29397
wrapper @ app.js:31601
commitAttachRef @ lib.js:11063
commitAllLifeCycles @ lib.js:12178
callCallback @ lib.js:2265
invokeGuardedCallbackDev @ lib.js:2304
invokeGuardedCallback @ lib.js:2161
commitRoot @ lib.js:12277
performWorkOnRoot @ lib.js:13244
performWork @ lib.js:13194
requestWork @ lib.js:13105
scheduleWorkImpl @ lib.js:12959
scheduleWork @ lib.js:12916
enqueueSetState @ lib.js:8439
Component.setState @ app.js:37227
handleLoaded @ app.js:29576
wrapper @ app.js:31601
callback @ app.js:39579
el.onload.el.onerror.el.(anonymous function) @ app.js:39613
app.js:29402 Uncaught ReferenceError: google is not defined
    at Container.handleComponentMount (app.js:29402)
    at wrapper (app.js:31601)
    at commitAttachRef (lib.js:11063)
    at commitAllLifeCycles (lib.js:12178)
    at HTMLUnknownElement.callCallback (lib.js:2265)
    at Object.invokeGuardedCallbackDev (lib.js:2304)
    at invokeGuardedCallback (lib.js:2161)
    at commitRoot (lib.js:12277)
    at performWorkOnRoot (lib.js:13244)
    at performWork (lib.js:13194)

The exception is thrown here:

// https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
var map = new google.maps.Map(node) <-- THIS LINE
 this.setState({ map: map })

REPRO:

Component used:

import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps';

export class Map extends React.Component {

    render() {
        return <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: 52.03, lng: 19.27 }}
        />;
    }
}

module.exports =  withScriptjs(withGoogleMap(Map));

Calling the component:

<Map
                containerElement={<div style={{ width: "100%", height: "300px" }} />}
                mapElement={<div style={{ width: `100%`, height: "100%" }} />}
                loadingElement={<div style={{ width: `100%`, height: "100%" }} />}
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEEbR4p4ZJUspR3sBx70f7T8dCq0OlG64&v=3.exp&libraries=geometry,drawing,places" />

Please note, that I’m able to reproduce this error only when I access page using react-google-maps with no connection at the moment of initializing the app. When I disable network while working on an application, it’ll display an error, but won’t break it.

Depedencies: “react”: “^16.2.0”, “react-dom”: “^16.2.0”, “react-google-maps”: “^9.4.5”, “react-router-dom”: “^4.2.2”,

Regards, Kamil

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:6

Top GitHub Comments

4reactions

kamil-mrzyglodcommented, Feb 26, 2018

@felquis I don’t think, that breaking the whole app because you couldn’t download Google Maps is the right thing to do. I’d rather emit a warning and fail silently.

Personally I find it a minor flaw, but still a bit surprising one, especially that it prevents me from developing an app locally when no internet connection is available.

1reaction

bmihelaccommented, Apr 20, 2018

sure, I just gave example for workaround.