Invariant Violation: _Registercomponent(...): Target Container Is Not a Dom Element

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

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'));

React Uncaught Error: Target container is not a DOM element

The way you have it it runs before you even have DOM.

You should include it in the bottom like so:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>REACT TEST</title>
</head>

<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>

</html>

Uncaught Invariant Violation: Target container is not a DOM element.- Reactjs

As you are not using index.html in wordpress you will need to add root container div for react to use to render your application. Try adding div for app in wordpress html i.e <div id="app"></div>

       <html>
         <head>

        </head>
        <body>
          <div id="app"></div> 
          <script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>

        </body>
    </html>

React-18 Uncaught Error: createRoot(...): Target container is not a DOM element

The $ function from jquery returns a special object called a "Wrapped Set". React doesn't know anything about these, so createRoot can't use it. You'll either need to use .get to access the underlying dom element:

const user = window.$('#user');
if (user.length) {
  const root = createRoot(user.get(0));
  root.render(<User/>);
}

Or you could use document.getElementById (this is built in to the browser and does not require jquery):

const userEl = document.getElementById("user");
if (userEl) {
  const root = createRoot(userEl);
  root.render(<User/>)
}

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

Apparently you forgot to add the element in your page that is the reason for which react does not find a container, to avoid this kind of problem you have to create a div element with identifier root or You have to change your selector.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div id="root">
  <h1>Hello, world!</h1></div>,
  document.querySelector('body')
);

<div id="root"></div>

Uncaught Invariant Violation: Target container is not a DOM element

I found the solution on it. Is needed to check if the element on FOR loop is a DOM element, if not continue to the next.


  var els = document.getElementsByClassName('switch-3d-permissao');

  for (var i in els) {
    var element = els[i];

    // Check if it is an object
    if (typeof element !== 'object') {
      continue;
    }

    // ...
  }

Invariant Violation: _Registercomponent(...): Target Container Is Not a Dom Element