Fix createRoot(...): Target container is not a DOM element error in React

Current Location：Home > Learning > WEB FRONT-END > React >

Vue React JavaScript Angular CSS HTML

Fix createRoot(...): Target container is not a DOM element error in React

Author：JIYIK Last Updated：2025/03/15 Views：

There are several reasons why the error "createRoot(...): Target container is not a DOM element" occurs:

An incorrect id is passed to the document.getElementById() method.
Place the React script file above the code that creates the div element.
Misconfiguration of webpack's index.html file.

The following is an example that produces this error.

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ 给 getElementById() 方法传了一个错误的ID
const rootElement = document.getElementById('wrong-id');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

We passed a wrong ID to the getElementById method, so we ended up passing a null value to the createRoot() method which caused the error.

To resolve the “createRoot(...): Target container is not a DOM element” error, make sure the ID used to select the element is the same as the one you specified in your index.html file and place the React script below the code that declares the div element.

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 必须和 index.js 匹配 -->
    <div id="root"></div>
  </body>
</html>

In the example the ID in the index.html file is root, so we have to use it when selecting the root element in index.js.

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// ✅ correct ID passed
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Another common cause of this error is placing the React.js script file above the code that creates the div element in the index.html file.

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- ⛔️ BAD: script runs before div is created  -->
    <script src="/bundle.js"></script>

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

The bundle.js script runs before the div element is created which causes the error.

Instead, place our script tag below the code that declares the div element.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>

    <!-- ✅ GOOD: div already exists  -->
    <script src="/bundle.js"></script>
  </body>
</html>

Another common cause of this error is incorrect configuration of the html-webpack-plugin when using webpack.

When using webpack, we can use the template option to provide custom HTML files. The html-webpack-plugin will automatically inject all necessary CSS, JS, manifest and favicon files into the markup.

First update the plugins section of the webpack configuration file to provide the path to the custom html file.

webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
      title: "Your custom title",
      template: './src/index.html'
    })
],

And create an index.html file in your src directory with the following code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 👇️ must match the id in your index.js file  -->
    <div id="root"></div>
  </body>
</html>

Now our index.js file should select the element with ID root.

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

The createRoot() method takes a root element as a parameter and creates a React root.

The root has a render() method that can be used to render React elements into the DOM. A root in React is a pointer to a top-level data structure that React uses to keep track of the tree to render.

Previous：Rendered fewer hooks than expected error in React

Next：Solve the Module not found: Can't resolve 'react-bootstrap' error

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

React Tutorial - Transferring Props

Publish Date：2025/03/16 Views：185 Category：React

React transfers Props. Props are generated when components are encapsulated. Components expose some properties (Props) to the outside world to complete some functions.

React Tutorial: Props Anti-Pattern

Publish Date：2025/03/16 Views：183 Category：React

React's Props anti-pattern, using Props to generate state in getInitialState is an anti-pattern - Anti-Pattern.

React Tutorial - Props Validation

Publish Date：2025/03/16 Views：99 Category：React

Props validation is a very useful way to use components correctly. It can avoid many bugs and problems as your application becomes more and more complex. In addition, it can make your program more readable.

React tutorial: Types of Props for child components

Publish Date：2025/03/16 Views：170 Category：React

Usually, the child components of a React component are a group, that is, the child components are an array. Introduction to Type of the Children Props.

How to solve the error Uncaught TypeError: Cannot read properties of undefined in

Publish Date：2025/03/16 Views：150 Category：React

In the process of React development, we often encounter some errors. Here we look at an error reported in App.js. The error is as follows: App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState') at onInput

Why do you need to bind event handlers in React Class Components?

Publish Date：2025/03/16 Views：58 Category：React

When using React, we must have come across control components and event handlers. We need to use `.bind()` in the constructor of the custom component to bind these methods to the component instance. As shown in the following code:

Solution to the error ＂does not contain a default export＂ in React

Publish Date：2025/03/16 Views：187 Category：React

When we try to use `default import` to import from a module that does not have a `default export`, we get a "does not contain a default export" error. To fix the error, make sure the module has named exports and wrap the import in curly braces, e.g.

Error in React: Attempted import error 'X' is not exported from Solution

Publish Date：2025/03/16 Views：76 Category：React

In React, the error “Attempted import error 'X' is not exported from” in React.js occurs when we try to import a named import that does not exist in the specified file. To fix the error, make sure the module has named exports and you have not obfu

Solve the Module not found: Can't resolve 'react-bootstrap' error

Publish Date：2025/03/16 Views：85 Category：React

To resolve the error "Module not found: Error: Can't resolve 'react-bootstrap'", make sure to install the react-bootstrap package by opening a terminal in the root directory of the project and running the command `npm install react-bootstrap bootstrap

JIYIK CN >