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.

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.

• javascript
• reactjs
• typescript

• Well, did you try npm i --save-dev @types/react-dom? – Sam Gomena Commented Apr 12, 2022 at 2:30

4 Answers 4

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'

I got this example from https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Have you tried createRoot(container!) ?

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?

Using ReactDOM before createRoot() does solve this issue. Example-

ReactDOM.createRoot(rootElement)