Invariant Violation: _registerComponent(…): Target container is not a DOM element

Invariant Violation: _registerComponent(…): Target container is not a DOM element

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

Yo

;
}
});

React.renderComponent(, document.body);

HTML:






What does this mean?

Solutions/Answers:

Solution 1:

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.


Update: (October 07, 2015 | v0.14)

React.render is deprecated, use ReactDOM.render
instead.

Example:

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

Solution 2:

/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.

Source: React Starter Kit, isomorphic-style-loader

Solution 3:

the ready function can be used like this:

$(document).ready(function () {
  React.render(<App />, document.body);
});

If you don’t want to use jQuery, you can use the onload function:

<body onload="initReact()">...</body>

Solution 4:

just a wild guess, how about adding to index.html the following:

type="javascript"

like this:

<script type="javascript" src="public/bundle.js"> </script>

For me it worked! 🙂

Solution 5:

I ran into the same error. It turned out to be caused by a simple typo after changing my code from:

document.getElementById('root')

to

document.querySelector('root')

Notice the missing ‘#’
It should have been

document.querySelector('#root')

Just posting in case it helps anyone else solve this error.

Solution 6:

Yes, basically what you done is right, except you forget that JavaScript is sync in many cases, so you running the code before your DOM gets loaded, there are few ways to solve this:

1) Check to see if DOM fully loaded, then do whatever you want, you can listen to DOMContentLoaded for example:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

2) Very common way is adding the script tag to the bottom of your document (after body tag):

<html>
  <head>
  </head>
  <body>
  </body>
  <script src="/bundle.js"></script>
</html>

3) Using window.onload, which gets fired when the entire page loaded(img, etc)

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4) Using document.onload, which gets fired when the DOM is ready:

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

There are even more options to check if DOM is ready, but the short answer is DO NOT run any script before you make sure your DOM is ready in every cases…

JavaScript is working along with DOM elements and if they are not available, will return null, could break the whole application… so always make sure you are fully ready to run your JavaScript before you do…