Fix - createRoot(...): Target container is not a DOM element

avatar

Borislav Hadzhiev

Fri Apr 01 20222 min read

Fix - createRoot(...): Target container is not a DOM element #

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

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

createroot target container not dom element

Here is an example of how the error occurs.

index.js
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>, );

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 solve the "createRoot(...): Target container is not a DOM element" 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
<!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
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 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
<!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
<!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 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
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.

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

index.js
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 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.