Intermittent "Script is not loaded" Error when using callbackName

[mikehazell]

Hey there,

We're getting this error intermittently when trying to load the GoogleMaps Api.

It looks like what's happening is that asyncScriptLoaderTriggerOnScriptLoaded is being called before the script onLoad event fires. Only happens about once in 5 refreshes.

I have a workaround that feels kind of hacky. It just ignores mapEntry.loaded if callbackName is defined.

      asyncScriptLoaderTriggerOnScriptLoaded() {
        let mapEntry = SCRIPT_MAP.get(scriptURL);
        const { callbackName } = options;
        if (!mapEntry || !mapEntry.loaded && !callbackName) {
          throw new Error("Script is not loaded.");
        }

I'd be happy to help out with this. Not sure what the right direction to go is though.

[mikehazell]

Hey Hugo,

So, having slept on this for a couple of nights, I'm thinking the better way to handle this case is if the user has given a callbackName, to assume that this will actually be called and therefore not listen to the onload event in the first place. The onerror event still makes sense though.

I'm going to see if I can get that to work.

[dozoisch]

Hmm that seems to make sense!

[lakiboy]

Any updates on this? There is a problem with react-google-recaptcha in IE versions <10. asyncScriptLoaderTriggerOnScriptLoaded is fired before script.onload, hence mapEntry.loaded always evaluates to false resulting in exception being thrown as originally stated by @schmicko.

The monkey patch proposed fixes the problem, but has anyone figured a way to fix it properly?

[mikehazell]

Hey @lakiboy,

I've done a bit of a rewrite which I'm using successfully in my project. I haven't made a pull request yet because I broke the tests, changed the API and did some other things that are generally not good form when contributing to an Open Source project. You are welcome to use my version if you're feeling brave. You'll need to copy paste it into your project for now though (no npm).

Other than fixing the onload issue, it now exports a decorator function. Syntax looks like this:

import makeAsyncScriptLoader from './async-script';

const callbackName = 'initializeMaps';
const asyncOptions = {
    callbackName,
    scriptURL: `//maps.googleapis.com/maps/api/js?v=3.exp&callback=${callbackName}`,
    globalName: 'google',
};

@makeAsyncScriptLoader(asyncOptions)
class ChildComponent extends React.Component {
    .... your normal component
}

The asyncScriptOnLoad method is passed to the component as a prop from a parent component (which I'm now thinking is a mistake, or at least should be optional).

class ParentComponent extends React.Component {
    onScriptLoaded() {
        console.log('loaded it');
    }

    render() {
        return (
            <ChildComponent asyncScriptOnLoad={this.onScriptLoaded} />
        );
    }
}

Hope this helps, when I get some time I'll put this back together, add tests, and make a proper pull request.

[lakiboy]

Thanks a lot. Will give it a try. Decorator fits perfectly into this.

[hartzis]

Closing since 1.0.0 #33 updated this component to a HOC.

[kevincarrogan]

This appears to have been closed due to the 1.0.0 change but this problem still persists.

Should I create a new issue, or alternatively could this issue be re-opened?

To re-summarise the issue.

When using this component with the Google Maps API and a callback the callback may be called before the script onLoad is called.

Given the previous discussions on this I feel there are a few ways of solving this:

• Treat onLoad and callback both as equal signals that the script is loaded, whichever comes first will be the signal the script is loaded and any subsequent calls are ignored
• If given a callback then only wait until both onLoad and callback have been called as a signal the script is loaded
• If given a callback ignore onLoad and only wait for callback as a signal the script is loaded