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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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?

Answers:

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 your code, 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.

Questions:
Answers:

/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

Questions:
Answers:

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>

Questions:
Answers:

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! 🙂

Questions:
Answers:

In my case this error was caused by hot reloading, while introducing new classes. In that stage of the project, use normal watchers to compile your code.

Questions:
Answers:

For those using ReactJS.Net and getting this error after a publish:

Check the properties of your .jsx files and make sure Build Action is set to Content. Those set to None will not be published. I came upon this solution from this SO answer.

Questions:
Answers:

I ran into similar/same error message. In my case, I did not have the target DOM node which is to render the ReactJS component defined. Ensure the HTML target node is well defined with appropriate “id” or “name”, along with other HTML attributes (suitable for your design need)