Using Webpack with React, it’s critical you import your bundle.js after any DOM elements in your page that you intend to reference. See this issue discussed in this SO question here.
For example:
<body> <h2>React with ES5</h2> <script src="dist/bundle.js"></script> <div id="app"></div> </body>
Importing bundle.js before a DIV element that you reference in your app will result in this error:
Uncaught Error: _registerComponent(...): Target container is not a DOM element.
at invariant (bundle.js:839)
at Object._renderNewRootComponent (bundle.js:20668)
at Object._renderSubtreeIntoContainer (bundle.js:20758)
at Object.render (bundle.js:20779)
Instead, you need to ensure bundle.js is loaded after the elements you need to reference:
<body> <h2>React with ES5</h2> <div id="app"></div> <script src="dist/bundle.js"></script> </body>