1
resposta

Bug no arquivo da aula

Oi tudo bem? umas duas aulas pra acabar o curso, o meu organo nao estava renderizando, vi que tava com essa msg

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.tsx:9.

mais alguém teve esse problema ?

1 resposta

Oi Demétrio! Tudo bem contigo?

Esse erro ocorre ao tentar renderizar um componente JSX no React que foi escrito em TypeScript. O erro indica que o tipo do componente é inválido e não corresponde a uma string (para componentes internos) ou a uma classe/função (para componentes compostos).

As possíveis causas para esse erro são:

  1. O componente não foi exportado corretamente: Pode ser que o componente não tenha sido exportado no arquivo em que foi definido. Certifique-se de que o componente seja exportado usando a palavra-chave export antes de sua declaração.

  2. Problemas com as importações: Talvez as importações do componente estejam erradas, e isso pode estar causando conflitos no momento da renderização. Verifique se as importações estão corretas, especialmente se você está usando importações padrão (default) ou nomeadas.

Para corrigir o erro, siga os passos abaixo:

  1. Verifique se o componente foi exportado corretamente:

    • No arquivo onde o componente é definido, adicione a palavra-chave export antes da declaração do componente.
    • Exemplo: export function MeuComponente() { ... } ou export default function MeuComponente() { ... }.
  2. Verifique as importações:

    • No arquivo que está usando o componente, certifique-se de que as importações estejam corretas. Se você está importando um componente padrão, use import MeuComponente from './MeuComponente';. Se for uma importação nomeada, use import { MeuComponente } from './MeuComponente';.
  3. Se você está usando um sistema de módulos que não seja o padrão do TypeScript, como o CommonJS (require e module.exports), verifique se as importações e exportações estão sendo feitas corretamente.

Recomendo verificar o arquivo index.tsx na linha 9, onde ocorre o erro, para identificar qual das situações acima está causando o problema. Corrija a exportação e importação do componente conforme necessário e o erro deve ser resolvido.


E se possível para que eu possa lhe ajudar melhor, você poderia exportar esse seu projeto para o GitHub, ou para o Drive, ou para o Replit, ou alguma plataforma onde eu possa ter acesso ao seu projeto e possa rodar ele por aqui e encontrar o problema e lhe ajudar ?

Era isso!

Aguardo sua resposta para que eu possa te auxiliar da melhor forma possível! Abraços e bons estudos.