react-google-maps-api: useLoadScript() throws "invariant requires an error message argument"

Please provide an explanation

Your Environment

os: mac node --version v10.15.3 react version 16.8.7 webpack version 4.28.3 @babel version @babel/core@7.2.2 @react-google-maps/api version 1.3.0

How is it behave?

When trying to use useLoadScript() hook, I get following error:

browser.js:22 Uncaught Error: invariant requires an error message argument
    at invariant (browser.js:22)
    at reactgooglemapsapi.es.production.js:331
    at commitHookEffectList (react-dom.development.js:18059)
    at commitPassiveHookEffects (react-dom.development.js:18086)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitPassiveEffects (react-dom.development.js:19712)
    at wrapped (scheduler-tracing.development.js:177)
    at flushFirstCallback (scheduler.development.js:99)
    at flushWork (scheduler.development.js:216)
    at MessagePort.push../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage (scheduler.development.js:619)

The code is simple:

export default function Map( props ) {
    const { isLoaded, loadError } = useLoadScript( {
        googleMapsApiKey: googleConfig.apiKey,
        id: props.id + '-script-loader',
    } );

    if ( loadError ) {
        return <div>Map cannot be loaded right now, sorry.</div>
    }

    return (
       <>{  isLoaded ? <GoogleMap {...props} /> : <LoadingAnimation /> }</>
    )
}

How should it behave correctly?

It should not throw the error 😃

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

@JustFly1984 I have the libraries prop const libs = ['places', 'visualization', 'drawing', 'geometry'];

const { isLoaded, loadError } = useLoadScript({ googleMapsApiKey: ‘some-super-api-key’, libraries: libs, });

shobishani on Jun 26, 2019

Yes use onLoad with GoogleMap component and you’ll get the map instance Defiantly you can pass to parent with callback.

On Thu, 27 Jun 2019 at 12:22 PM, Sergey Segeda notifications@github.com wrote:

Is there another way to get map instance without call useGoogleMap() ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JustFly1984/react-google-maps-api/issues/170?email_source=notifications&email_token=AILXB5KBU7Y3ZIA6N4UNONDP4RTBRA5CNFSM4H3JOFN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYWGHPQ#issuecomment-506225598, or mute the thread https://github.com/notifications/unsubscribe-auth/AILXB5PDK53FGFFDLXGKHUDP4RTBRANCNFSM4H3JOFNQ .

shobishani on Jun 27, 2019