• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

34
Views
I can't use createRoot function in react-dom/client
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.

about 2 months ago ·

Santiago Gelvez

3 answers
Answer question

0

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'

about 2 months ago · Santiago Gelvez Report

0

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?

about 2 months ago · Santiago Gelvez Report

0

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

about 2 months ago · Santiago Gelvez Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.