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();Si se ejecuta este código, el error ocurre como sigue.
No se pudo encontrar un archivo de declaración para el módulo 'react-dom/client'. 'E:/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js' implícitamente tiene un tipo 'cualquiera'. Pruebe npm i --save-dev @types/react-dom si existe o agregue un nuevo archivo de declaración (.d.ts) que contenga declare module 'react-dom/client'; 1 | importar React desde 'react';
2 | importar * como ReactDOMClient desde 'react-dom/client'; | ^^^^^^^^^^^^^^^^^^ 3 | importar la aplicación desde './App'; 4 | importar reportWebVitals desde './reportWebVitals';
quiero la respuesta
Asegúrese de tener instaladas las versiones de tipos correctas. Intenta ejecutar:
npm install --save-dev @types/react@18 @types/react-dom@18
No confíe en su IDE para recoger todo correctamente. En mi caso, tuve que escribir manualmente la importación y usar createRoot de esta manera:
import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')!); // notice the '!' root.render(<App />);Observe cómo necesita decirle a TypeScript que está seguro de que su raíz no será nula con el signo de exclamación ('!'). Ver más información en 'Actualizaciones a las API de representación del cliente'
Si está utilizando mecanografiado con reaccionar, entonces necesita importar dependencias relativas que admitan tipos y cumplan con otras condiciones de mecanografiado. Así que intente ejecutar el comando npm i --save-dev @types/react-dom
Y en caso de que esté trabajando con dependencias que no admiten mecanografiado, puede moverse con este método. Espero que esto ayude.
Obtuve este ejemplo de 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" />); ¿Has probado createRoot(container!) ?