Cuando importo el componente Día al componente Semana (ambos son archivos .tsx), aparece el siguiente error:
Error no detectado: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto.
Compruebe el método de renderizado de la Week
Día.tsx:
import React from 'react'; export default function Day () { return ( <div> I am day </div> ) }Semana.tsx
import React from 'react'; import Day from './Day' export default function Week () { return ( <div> I am Week <Day /> </div> ) }Si tuviera que eliminar el componente Día del semana, puedo ver el componente Semana en la pantalla. Si tuviera que cambiar el nombre del archivo Day.tsx a Day.jsx, el problema se solucionaría. Sólo ocurre con mecanografiado. También probé diferentes convenciones de importación.
¿Algunas ideas?
Agregue esto a su tsconfig.json
{ "compilerOptions": { "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "noFallthroughCasesInSwitch": true, "jsx": "react-jsx" }, "include": [ "src", ] }Si está utilizando webpack también esto solucionaría el problema
module.exports = { //Rest of your code resolve: { extensions: ['.ts', '.tsx'], }, };