Así es como se ve _app.tsx:
function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> }y recibo este error mientras construyo el proyecto:
Type error: 'Component' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element. Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/user/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.Estas son las versiones de reacción:
"react": "17.0.2", "react-dom": "17.0.2", "@types/react": "17.0.26", Traté de cambiar a la versión 18, funcionó, pero recibí este error: Hydration failed because the initial UI does not match what was rendered on the server
Agregue el siguiente código en el archivo package.json
"resolutions": { "@types/react": "17.0.2", "@types/react-dom": "17.0.2" }Luego reinstalar los paquetes
yarn npm iCreo que se debe a que no configuró TypeScript correctamente en su proyecto. Creo que, actualmente, cuando instalas next.js, deberías tener la opción de seleccionar typescript . Que no
npm install --save-dev typescript @types/react @types/node. en tsconfig.json, debe tener "jsx": "preserve" en las opciones del compilador. Nos permite utilizar archivos .tsx en el proyecto. un ejemplo de tsconfig.json
Creo que este podría ser el problema. Para indicar que estamos devolviendo jsx , debemos envolver el componente con () . pero en tu componente tienes
return <Component {...pageProps} /> aunque traté de poner () , vscode lo omite. Así que prueba la función de flecha:
const App = ({ Component, pageProps }: AppProps) => ( <Component {...pageProps} /> ); export default App;