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.
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'
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.
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!) ?