You are importing createRoot from 'react-dom' which is not supported

# You are importing createRoot from 'react-dom' which is not supported

The error "You are importing createRoot from 'react-dom' which is not supported" occurs when we import the createRoot function from react-dom.

To solve the error, import createRoot from react-dom/client.

you are importing createroot from react dom

Here is an example of how the error occurs in index.js.

index.js

Copied!
// ⛔️ Warning: You are importing createRoot from "react-dom"
// which is not supported. You should instead
// import it from "react-dom/client"
import {StrictMode} from 'react';

import {createRoot} from 'react-dom'; // 👈️ wrong import path
import App from './App';

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

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

To solve the error import createRoot from react-dom/client.

index.js

Copied!
import {StrictMode} from 'react';

// ✅ Now importing from react-dom/client
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ IMPORTANT: make sure to specify correct ID
// must be the ID of the div element in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

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

The code for this article is available on GitHub

Alternatively, you can import react-dom/client as an object and access properties on it.

index.js

Copied!
// 👇️ For client createRoot or hydrateRoot
import * as ReactDOMClient from 'react-dom/client';

// 👇️ For renderToPipeableStream or renderToReadableStream
import * as ReactDOMServer from 'react-dom/server';

The render() method of the react-dom package is considered legacy starting react-dom version 18.

The method is replaced with the createRoot() method that is exported from react-dom/client.

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.

In the new API, we create a root and then call the render() method on it.

If your app doesn't work after updating to React 18, check whether it's wrapped in <StrictMode>. Strict mode was changed in React 18 and has more checks than it did in previous versions.

When using Strict mode you might notice that console.log() gets printed twice.

The code for this article is available on GitHub

# Remove the Strict mode wrapper

If removing Strict mode fixes your app, remove it during the upgrade and add it back (either at the top or for specific parts of your application) after you have fixed the issues it is pointing out.

An alternative solution to get rid of the warning is to revert your versions of the react and react-dom packages to an older version, e.g. 17.0.2 by running npm install react@17.0.2 react-dom@17.0.2, but this is not recommended.

You can read more about the breaking changes in React 18 in their Github release page, but chances are you won't be affected by the breaking changes and you'll take advantage of better performance by updating to React 18.

You can also check out the official How to Upgrade to React 18 Guide.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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.

You are importing createRoot from 'react-dom' which is not supported