I get this error after a making trivial React example page:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Here's my code:
/** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body);
HTML:
<html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html>
What does this mean?
To solve the "createRoot(...): Target container is not a DOM element" error, make sure that the ID you are using to select the element is the same ID that you have specified in your index. html file and place the react script below the code that declares the div element.
This issue could pop out because: you don't have module react-dom properly installed inside your project and you tried to call it, or simply you didn't call this module correctly. Notes : – The name you use to import should be exactly the same as the name when you use it.
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more. render() findDOMNode()
By the time script is executed, document
element is not available yet, because script
itself is in the head
. While it's a valid solution to keep script
in head
and render on DOMContentLoaded
event, it's even better to put your script
at the very bottom of the body
and render root component to a div
before it like this:
<html> <head> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html>
and in the bundle.js
, call:
React.render(<App />, document.getElementById('root'));
You should always render to a nested div
instead of body
. Otherwise, all sorts of third-party code (Google Font Loader, browser plugins, whatever) can modify the body
DOM node when React doesn't expect it, and cause weird errors that are very hard to trace and debug. Read more about this issue.
The nice thing about putting script
at the bottom is that it won't block rendering until script load in case you add React server rendering to your project.
React.render
is deprecated, useReactDOM.render
instead.
Example:
import ReactDOM from 'react-dom'; ReactDOM.render(<App />, document.getElementById('root'));
/index.html
<!doctype html> <html> <head> <title>My Application</title> <!-- load application bundle asynchronously --> <script async src="/app.js"></script> <style type="text/css"> /* pre-rendered critical path CSS (see isomorphic-style-loader) */ </style> </head> <body> <div id="app"> <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) --> </div> </body> </html>
/app.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; function run() { ReactDOM.render(<App />, document.getElementById('app')); } const loadedStates = ['complete', 'loaded', 'interactive']; if (loadedStates.includes(document.readyState) && document.body) { run(); } else { window.addEventListener('DOMContentLoaded', run, false); }
(IE9+)
Note: Having <script async src="..."></script>
in the header ensures that the browser will start downloading JavaScript bundle before HTML content is loaded.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With