CODEWITHSUNDEEP
reactjs
rai.
rai.

Reputation: 345

Issue importing createRoot from react-dom/client

After using create-react-app and updating the index.js ReactDOM.render to React 18 I get this error: "Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client'".

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

Upvotes: 34

Views: 64207

Answers (7)

Faisal Nazik
Faisal Nazik

Reputation: 2863

The error message received indicates that you should be importing the createRoot method from react-dom/client instead of from react-dom.

To fix the issue, modify your import statement for createRoot to look like this :

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

So the modified code should be :

import React from 'react';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

Upvotes: 52

abaddion
abaddion

Reputation: 1

If you import ReactDOM and never use it in your code, you will receive a warning when compiling your code. As I am using Provider and reduxJS, my code looks like this:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit'; 
import App from './components/App';
import reducers from './reducers';
import reduxThunk from 'redux-thunk';


const store = configureStore({
  reducer: reducers,
  middleware: [reduxThunk]
});

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

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Upvotes: 0

Arvind K.
Arvind K.

Reputation: 1294

You could just do:

import React from 'react';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

I used createRoot imported from the react-dom/client and removed the import of unused ReactDOM

Upvotes: 1

David Andres Leon Castilla
David Andres Leon Castilla

Reputation: 11

Now in React 18+ you can do this:

import React from 'react'
import ReactDOM from 'react-dom/client'
import Switch from './components/Switch'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <Switch />
    </React.StrictMode>,
)

Upvotes: 0

sebastian suarez
sebastian suarez

Reputation: 1

Necesitas agregar '/client' cuando importas 'ReactDOM'

You need to add '/client' when you import 'ReactDOM'.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Switch from './components/Switch';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

Upvotes: -1

Edward Casanova
Edward Casanova

Reputation: 954

For all the typescript users, add this if you're getting the classic "no types found for this module" warning.

src/react-app-env.d.ts

declare module "react-dom/client" {
  // typing module default export as `any` will allow you to access its members without compiler warning
  var createRoot: any;
  export {createRoot};
}

Upvotes: 5

Monis Ansari
Monis Ansari

Reputation: 21

make sure your react-dom version is "^18.0.0"

Upvotes: 2

Related Questions