Home/Questions/The best way to solve "_registerComponent(...): Target container is not a DOM element" error.
Next
Answered
Bradford Zieme
  • 21
Asked: 2022-06-12T17:36:22+00:00 In:

The best way to solve “_registerComponent(…): Target container is not a DOM element” error.

  • 21

Hi, It’s me again. I am having trouble with the “_registerComponent(…): Target container is not a DOM element” error. Please give me the best way to handle this error. This morning, after I was trying to run a program to create a trivial React example page, a message popped up on my screen saying something like this:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

The following is the code that I used to create my program:

/** @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>

I’ve tried several approaches but am still unable to resolve this issue. Is there anyone who can help me?

registercomponenttarget container is not a dom element
Share

1 Answer

  1. Best Answer
    Expert

    Cause:

    Keeping the script in the head and rendering on DOMContentLoaded is a viable option. However, if you retain the script in the head in this case, the document element will not be available when the script is launched. This is the reason why you’re getting the error: “_registerComponent(…): Target container is not a DOM element”.

    Solution:

    First of all, your script should be placed at the bottom of the body, and the root component should be displayed to a div before it, as seen below:

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

    Then let’s order in the bundle.js as below:

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

    In this post, I’ll give you one more piece of advise. Unless you always render to a nested div instead of the body, the 3rd party code ( for example browser plugins, Google Font Loader,…) can alter the DOM node’s body when React does not anticipate it, resulting in strange issues that are difficult to track down and fix.

    I hope that my solutions will be useful for you to solve your “_registerComponent(…): Target container is not a DOM element” error.    

    • 15

Leave an answer

You must login to add an answer.

Need An Account,