title: DOM isn't loaded yet when React tries to registers Component which runs in window.onload or window.addEventListener with load
body: <p>I have a script tag in the head html tag. The script should add an event listener when the rest of the index.html file has loaded. Therefore, nothing should run prior to that happening. It is almost the same as adding the script tag at the end of the body except for the browser reading the javascript and causing a little bit of render-blocking.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          //meta stuff
          &lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://unpkg.com/react@15/dist/react.js"&gt;&lt;/script&gt;
          &lt;script src="https://unpkg.com/react-dom@15/dist/react-dom.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="./code/webapp.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;noscript&gt;Javascript is not enabled!&lt;/noscript&gt;
          &lt;div id="root"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the console error message I get from React:</p>
  
  <pre><code>Uncaught Error: _registerComponent(...): Target container is not a DOM element.
      at invariant (react-dom.js:18118)
      at Object._renderNewRootComponent (react-dom.js:9978)
      at Object._renderSubtreeIntoContainer (react-dom.js:10069)
      at Object.render (react-dom.js:10090)
      at App (webapp.js:formatted:28)
  </code></pre>
  
  <p>The weird part is that the function App() get fired during a window.onload or window.addEventListener('load'). I used this before on my personal website but I had a defer and async on the script tag so maybe that is why it always fired correctly.</p>
  
  <p><strong>webapp.js</strong></p>
  
  <pre><code>...
  function App() {
      console.log('App loading...');
      const reactroot = document.getElementById('root');
      var app = React.createElement(WebApp, null);
      ReactDOM.render( app, reactroot);
  }
  window.onload = App;
  </code></pre>
  
  <p>In case anyone suggest using document.ready(), I am trying to not rely on jQuery. I want to also use this for a production website, not just my personal portfolio. So I can't rely on adding defer/async to the script tag.</p>
  
  <p>Related topics:</p>