HTML script is loading AFTER react components

Question

My index.html

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="google-signin-client_id" content= "my_client_id.apps.googleusercontent.com">

        <meta name="google-signin-scope" content="profile email">
        <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
        <script>
            function start() {
                console.log('script running')
                gapi.load('auth2', function() {
                    auth2 = gapi.auth2.init({
                        client_id: 'my_client_id.apps.googleusercontent.com',
                        scope: 'profile email'
                    });
                });
            }
        </script>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>


  </body>
</html>

In the start() function I print to the console to see when it's running.

When I load the page, every so often start() will load after the react components.

Login.js

    componentDidMount() {
        console.log(gapi.auth2.getAuthInstance())
    }

In the debugger you can see that the script is loading after the component:

If I refresh the page a few times, it works fine. But sometimes it works, sometimes it doesn't.

Why?

You ask why? but in all reality, I assume there is no why. It's just a race condition. Sometimes the code blocks are processed in one order, sometimes another. How are you calling start() and how are you initialising react components? Are they being done synchronously? — Matt Fletcher
– Matt Fletcher, Commented Nov 21, 2017 at 20:02
start() is being called in the HTML file "https://apis.google.com/js/client:platform.js?onload=start" — dropWizard
– dropWizard, Commented Nov 21, 2017 at 20:03
Ah yes, so that's async. If you remove async and defer from that tag, does it work? I'd imagine not because of the way google apis is forcing async loading — Matt Fletcher
– Matt Fletcher, Commented Nov 21, 2017 at 20:04
And even if it does start working as far as the console.log is concerned, the actual google API will probably still suffer the same race condition. Really you'll want to initialise the react components inside the callback of gapi.auth2.init(), or make sure that react calls that before trying to access any of its info — Matt Fletcher
– Matt Fletcher, Commented Nov 21, 2017 at 20:05

Dakota · Accepted Answer · 2017-11-21 20:48:26Z

7

I think the best way to load scripts in react is with a container component. It's a pretty simple component and it allows to you write the logic for importing the script in a component rather than your index.html. You are also going to want to make sure you don't include the script more than once by calling loadScript after a check in componentDidMount.

This is adapted from: https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/

Something like this. . .

  componentDidMount() {
    if (!window.google) {
      this.loadMapScript();
    }
    else if (!window.google.maps) {
      this.loadMapScript();
    }
    else {
      this.setState({ apiLoaded: true })
    }
  }

  loadMapScript() {
    // Load the google maps api script when the component is mounted.

    loadScript('https://maps.googleapis.com/maps/api/js?key=YOUR_KEY')
      .then((script) => {
        // Grab the script object in case it is ever needed.
        this.mapScript = script;
        this.setState({ apiLoaded: true });
      })
      .catch((err: Error) => {
        console.error(err.message);
      });
  }

  render() {
    return (
      <div className={this.props.className}>
        {this.state.apiLoaded ? (
          <Map
            zoom={10}
            position={{ lat: 43.0795, lng: -75.7507 }}
          />
        ) : (
          <LoadingCircle />
        )}
      </div>
    );
  }

and then in a separate file:

const loadScript = (url) => new Promise((resolve, reject) => {
  let ready = false;
  if (!document) {
    reject(new Error('Document was not defined'));
  }
  const tag = document.getElementsByTagName('script')[0];
  const script = document.createElement('script');

  script.type = 'text/javascript';
  script.src = url;
  script.async = true;
  script.onreadystatechange = () => {
    if (!ready && (!this.readyState || this.readyState === 'complete')) {
      ready = true;
      resolve(script);
    }
  };
  script.onload = script.onreadystatechange;

  script.onerror = (msg) => {
    console.log(msg);
    reject(new Error('Error loading script.'));
  };

  script.onabort = (msg) => {
    console.log(msg);
    reject(new Error('Script loading aboirted.'));
  };

  if (tag.parentNode != null) {
    tag.parentNode.insertBefore(script, tag);
  }
});


export default loadScript;

I know it's a lot but when I was first doing this it was so relieving when I found out there was a (fairly) simple way of including any script in any react component.

Edit: Some of this I just copy pasted but if you aren't using create-react-app you will probably have to replace some of the ES6 syntax.

edited Nov 21, 2017 at 20:48

answered Nov 21, 2017 at 20:25

Dakota

1,2748 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Fletcher Over a year ago

Ah, this is a better answer than mine I think, but we're on the same page

Dakota Over a year ago

I can't take too much credit for it though that article is very well written if you are interested in how it works.

dropWizard Over a year ago

thank you so much. this is very helpful. I'll mark as right and will try to implement it :-)

Matt Fletcher · Accepted Answer · 2017-11-21 20:22:59Z

My suggestions:

Change your google API script tag to be this, where you remove async and defer

<script src="https://apis.google.com/js/client:platform.js"></script>

Get rid of your start function, which will now run the console.log fine and dandy, but the second bit of code will cause the same issue as it will also be running asynchronously.

Modify your react code, so that the componentWillMount calls the contents of that function instead:

componentWillMount() {
  gapi.load('auth2', () => {
    auth2 = gapi.auth2.init({
      client_id: 'urhaxorid.apps.googleusercontent.com',
      scope: 'profile email',
      onLoad: () => {
        this.setState({ mapLoaded: true });
      }
    });
  });
}

componentDidMount() {
  if (this.state.mapLoaded) {
    console.log(gapi.auth2.getAuthInstance());
  }
}

Please bear in mind that I don't know what the onLoad is for google apis, and I am not 100% sure how to best do the setState stuff, but it may be a starting block.

Collectives™ on Stack Overflow

HTML script is loading AFTER react components

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related