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

Question

I got this error when I run this React code:

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

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

This is the error:

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

Answer 1

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

or

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

Answer 2

It looks like you forgot to define this id root in your html page, your html page should contain this id , put this line inside body, it will work:

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

You defined the id in a wrong place, use this part:

ReactDOM.render(
  <div>
     <h1>Hello, world!</h1>
  </div>,
  document.querySelector('#root')
);

Answer 3

Try this:

In Html file:

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

In JS file:

ReactDOM.render(
    <div>
        <h1>Hello World!</h1>
    </div>,
    document.getElementById('root')
);

Answer 4

In general it should look like this -> ReactDOM.render(Component, Container)

document.querySelector() should point to the container in your index.html as Mayank suggested in the comments. ( document.querySelector('.container') )

Please make sure to pass a react component you created like ReactDOM.render(<App />, document.querySelector('.container')

Answer 5

将document.querySelector('root')更改为document.getElementById("#root") 。