React-google-maps: Uncaught ReferenceError: google is not defined

Created on 21 Feb 2018 · 6Comments · Source: tomchentw/react-google-maps

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

Source

kamil-mrzyglod

👍5

Most helpful comment

@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.

kamil-mrzyglod on 26 Feb 2018

👍4

All 6 comments

What would be the desirable behaviour when the client isn't connected to the internet?

felquis on 26 Feb 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.

kamil-mrzyglod on 26 Feb 2018

👍4

Hi Guys, what's the status of this? Is going to be fixed or maybe you'd like to propose a solution with a PR? :)

kamil-mrzyglod on 20 Apr 2018

One way around this is using React 16 error boundaries.

bmihelac on 20 Apr 2018

❤1

@bmihelac Yeah, I've had to use it for now, but personally I don't think that self-defending against a library is a way to go, if it can be fixed easily.

kamil-mrzyglod on 20 Apr 2018

sure, I just gave example for workaround.

bmihelac on 20 Apr 2018

👍1

Was this page helpful?

0 / 5 - 0 ratings