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?
2 answers
solution1
5 ACCPTED 2017-11-21 20:25:40
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.
solution2
1 2017-11-21 20:22:59
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.