1

I can go to the site https://reactjs.org/docs/cdn-links.html, what i find there is this CDN:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

I am wondering if there is a way you can load the script async like any other javascript and place it in the like this:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" async></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" async></script>

The script I am trying to load after this does also have async in it:

<script src ="index.js" async></script>

But somehow it's not loading. And i am geting:

index.js:3 Uncaught ReferenceError: React is not defined

If i remove the async from the CDN everything works.

EliiTryToLearn
  • 125
  • 1
  • 11
  • what happens when you do? (obviously with a space between `"` and `async` (not sure if that's 100% required, but, lets strive to write proper HTML :p ) – Jaromanda X Nov 04 '20 at 23:49
  • Does not work, just get this error message when i try to index.js:3 Uncaught ReferenceError: React is not defined at index.js:3 But workes after i remove async – EliiTryToLearn Nov 04 '20 at 23:50
  • Yes you are right, I added space between " and async still the same results tho. – EliiTryToLearn Nov 04 '20 at 23:58
  • because your code is trying to access `React` before the library has loaded ... you need to somehow wait for those async scripts to load before using them – Jaromanda X Nov 04 '20 at 23:59
  • You can, but not recommended, because then you'd need to have an extra check to detect if react is fully loaded before trying to execute your own script (which depends on react) so you're not gaining any performance – Bert Maurau Nov 04 '20 at 23:59
  • It's strange as i put it in the and should be loaded first before the body? I can maybe use document.addEventListener('DOMContentLoaded', () => alert("DOM ready!")); and check it this way? – EliiTryToLearn Nov 05 '20 at 00:00
  • 1
    `should be loaded first before the body` - not if it's `async` - that's the whole point of the async attribute – Jaromanda X Nov 05 '20 at 00:02
  • 1
    You should only use async for scripts that are standalone and where it doesn't matter if it gets loaded 10min after everything else as a matter of speaking. Async has no order, so having two scripts with async could mean that the second one gets loaded first, then the first one, and if your second one depends on the first one, you'll run into issues. You could use defer to for the scripts or just put all your scripts at the end of the body to have a faster first paint. – Bert Maurau Nov 05 '20 at 00:12
  • Yes before i always did just put them at the end of the body but this changed me https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup but i will try defer and do it in a order. – EliiTryToLearn Nov 05 '20 at 00:14
  • Hm it's strange even with defer it did not work for me maybe it has something to do with crossorigin? – EliiTryToLearn Nov 05 '20 at 00:24
  • Nvm i forgot to put defer on the other script i was loading after the CDN, now it works :) – EliiTryToLearn Nov 05 '20 at 00:27

0 Answers0