javascript - DOM isn't loaded yet when React tries to registers Component which runs in window.onload or window.addEventListener with load -


i have script tag in head html tag. script should add event listener when rest of index.html file has loaded. therefore, nothing should run prior happening. same adding script tag @ end of body except browser reading javascript , causing little bit of render-blocking.

index.html

<html>     <head>         //meta stuff         <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>         <script src="https://unpkg.com/react@15/dist/react.js"></script>         <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>         <script type="text/javascript" src="./code/webapp.js"></script>     </head>     <body>         <noscript>javascript not enabled!</noscript>         <div id="root"></div>     </body> </html> 

here console error message react:

uncaught error: _registercomponent(...): target container not dom element.     @ invariant (react-dom.js:18118)     @ object._rendernewrootcomponent (react-dom.js:9978)     @ object._rendersubtreeintocontainer (react-dom.js:10069)     @ object.render (react-dom.js:10090)     @ app (webapp.js:formatted:28) 

the weird part function app() fired during window.onload or window.addeventlistener('load'). used before on personal website had defer , async on script tag maybe why fired correctly.

webapp.js

... function app() {     console.log('app loading...');     const reactroot = document.getelementbyid('root');     var app = react.createelement(webapp, null);     reactdom.render( app, reactroot); } window.onload = app; 

in case suggest using document.ready(), trying not rely on jquery. want use production website, not personal portfolio. can't rely on adding defer/async script tag.

related topics:

you should use domcontentloaded event instead of onload callback

document.addeventlistener("domcontentloaded", function(event) {     console.log("dom loaded , parsed"); }); 

check this question more information onload vs domcontentloaded event


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -