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

avatar

Borislav Hadzhiev

Last updated: Apr 1, 2022

banner

Photo from Unsplash

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, e.g. 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
// ⛔️ 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
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>, );

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

index.js
// 👇️ 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.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.