Solved: createRoot(): Target container is not a DOM element

# Solved: createRoot(): Target container is not a DOM element

The error "createRoot(...): Target container is not a DOM element" occurs for multiple reasons:

Passing an incorrect id to the document.getElementById() method.
Placing the react script file above the code that creates the div element.
Incorrectly configuring Webpack's index.html file.

createroot target container not dom element

# Pass the correct ID to document.getElementById()

Here is an example of how the error occurs.

index.js

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

import App from './App';

// 👇️ Passed wrong ID to getElementById() method
const rootElement = document.getElementById('wrong-id');
const root = createRoot(rootElement);

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

The code for this article is available on GitHub

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

To solve the error, make sure that the ID you are using to select the element is the same ID that you have specified in your index.html file and place the react script below the code that declares the div element.

public/index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 👇️ Must match with index.js  -->
    <div id="root"></div>
  </body>
</html>

The ID in the index.html file in the example is root, so that's what we have to use when selecting the root element in index.js.

index.js

Copied!
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>,
);

The code for this article is available on GitHub

# Place your React script tag at the bottom of the body tag

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

public/index.html

Copied!
<!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 your script tag below the code that declares the div element.

public/index.html

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

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

The code for this article is available on GitHub

# Configuring html-webpack-plugin correctly

Another common cause of the error is using Webpack with the html-webpack-plugin configured incorrectly.

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

First, update the plugins section of your Webpack config file providing a path to your custom html file.

webpack.config.js

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

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

src/index.html

Copied!
<!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 your index.js file should select the element with an ID of root.

index.js

Copied!
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 code for this article is available on GitHub

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

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

Make sure to import createRoot from react-dom/client. Importing it from react-dom is not supported.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Solved: createRoot(): Target container is not a DOM element