close

[Solved] Warning: You are importing createRoot from ‘react-dom’ which is not supported. You should instead import it from ‘react-dom/client’

I am facing the following error with my react project Warning: You are importing createRoot from ‘react-dom’ which is not supported. You should instead import it from ‘react-dom/client’ in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How Warning: You are importing createRoot from ‘react-dom’ which is not supported. You should instead import it from ‘react-dom/client’ Error Occurs?

I am facing the following error with my react project:

Warning: You are importing createRoot from ‘react-dom’ which is not supported. You should instead import it from ‘react-dom/client

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Warning: You are importing createRoot from ‘react-dom’ which is not supported. You should instead import it from ‘react-dom/client’ Error?

  1. How To Solve Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client' Error?

    To Solve Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client' Error After React 18 createRoot is moved to react-dom/client Just Use createRoot Like below: import * as ReactDOMClient from 'react-dom/client'; ReactDOMClient.createRoot(document.getElementById('root')); You Can Also use createRoot just like this: import { createRoot } from 'react-dom/client'; Now, Your error must be solved.

  2. Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client'

    To Solve Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client' Error After React 18 createRoot is moved to react-dom/client Just Use createRoot Like below: import * as ReactDOMClient from 'react-dom/client'; ReactDOMClient.createRoot(document.getElementById('root')); You Can Also use createRoot just like this: import { createRoot } from 'react-dom/client'; Now, Your error must be solved.

Solution 1: Use createRoot Like this

After React 18 createRoot is moved to react-dom/client Just Use createRoot Like below.

import * as ReactDOMClient from 'react-dom/client';
ReactDOMClient.createRoot(document.getElementById('root'));

For Example.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
        <App />
        );

You Can Also use createRoot just like this:

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

Now, Your error must be solved.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

Leave a Comment