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

Question

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.

Answer 1

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'