[Solved] Issue importing createRoot from react-dom/client

We Are Going To Discuss About Issue importing createRoot from react-dom/client. So lets Start this Reactjs Article.

Issue importing createRoot from react-dom/client

  1. [Solved] Issue importing createRoot from react-dom/client

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

  2. Issue importing createRoot from react-dom/client

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

Solution 1

Recently createRoot have been moved to react-dom/client in React 18 RC (RC 1), Source

So, Now you can do this :

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

And in your case, this should be like

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

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

Motivation: There are two reasons for this change.

First, it allows components to use the isomorphic APIs such as
flushSync without pulling in the client-specific entry. This means
that if you server render a component that only uses flushSync on the
client, the server doesn’t need to pull in the client-specific code
for createRoot or hydrateRoot.

Second, it creates parity with react-dom/server
More Info

Original Author Faisal Nazik Of This Content

Solution 2

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};
}

Original Author Edward Casanova Of This Content

Solution 3

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

Original Author Monis Ansari Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

Siddharth

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment