I can't use createRoot function in react-dom/client

user_18777761 0
Viewed 3014
import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';


const rootElement = document.getElementById("root");
// This opts into the new behavior!
ReactDOMClient.createRoot(rootElement as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

If this code is executed, the error happens like following.

Could not find a declaration file for module 'react-dom/client'. 'E:/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-dom if it exists or add a new declaration (.d.ts) file containing declare module 'react-dom/client'; 1 | import React from 'react';

2 | import * as ReactDOMClient from 'react-dom/client'; | ^^^^^^^^^^^^^^^^^^ 3 | import App from './App'; 4 | import reportWebVitals from './reportWebVitals';

I want the answer.

typescript reactjs javascript
3 Answers

Be sure you have the correct types versions installed. Try running:

npm install --save-dev @types/react@18 @types/react-dom@18

Don't rely on your IDE to pick up everything correctly. In my case I had to manually type the import and use createRoot like this:

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

const root = createRoot(document.getElementById('root')!);   // notice the '!'
root.render(<App />);

Notice how you need to tell typescript that you are sure your root won't be null with the exclamation mark ('!'). See more info in 'Updates to Client Rendering APIs'

user_113002670
user_162068530

If you are using typescript with react, then you need to import relative dependencies that support types and meets other typescript condition. So try running the command npm i --save-dev @types/react-dom

And in case you are working with dependencies that doesn't support typescript then you can get around with this method. Hope this helps.

Typescript. What to do if module doesn't have @types?

user_104132730
Related