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
Post a Comment