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?
- 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?
- Solution 1: Use
createRoot
Like this - Summary
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?
- 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 toreact-dom/client
Just UsecreateRoot
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. - 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 toreact-dom/client
Just UsecreateRoot
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