Elemento JSX não tem construtor? Entendendo o erro TypeScript

Introdução: Seu componente "está mudo" porque não sabe como nascer

Você está programando em TypeScript com React, tudo correndo bem. E então — puf! — o compilador joga na sua cara uma mensagem misteriosa:

JSX element type 'MyComponent' does not have any construct or call signatures.

Cena familiar? Se você é iniciante, esse erro pode parecer um feitiço de outro mundo. Mas não entre em pânico. Na verdade, é simples: o TypeScript está dizendo que o que você está tentando usar como componente JSX não é nem uma função nem uma classe que pode ser "chamada" ou "construída".

Neste artigo, vamos explicar esse erro de forma simples: por que ele ocorre, como corrigi-lo e o que significam essas "construct or call signatures". Vamos lá — vamos entender de forma divertida e com exemplos!

O que significa "construct or call signatures"?

Vamos imaginar que um componente JSX é um restaurante. Você entra, senta-se à mesa (passa as props) e espera que lhe tragam a comida (return JSX). Mas se o restaurante está fechado para reforma ou nem existe, você não consegue fazer o pedido.

No TypeScript, "construct signature" é a capacidade de uma classe ser chamada com new (como um construtor). "Call signature" é a capacidade de uma função ser chamada diretamente. Os componentes JSX no React podem ser funções ou classes. Se o TypeScript não vê no seu "componente" nem um nem outro — ele gera o erro.

Caso típico:

// Incorretoconst MyComponent = someObject;// <MyComponent /> — erro!

// Corretoconst MyComponent: React.FC<Props> = (props) => {  return <div>Olá</div>;};// <MyComponent /> — funciona

O erro ocorre quando você tenta usar no JSX algo que não é uma função ou classe. Por exemplo, uma string, número, objeto ou variável não inicializada.

Top 5 causas do erro (com exemplos de código em TypeScript)

Vamos analisar os cenários mais comuns onde você pode cair nessa armadilha. Para cada caso, mostrarei como o problema se apresenta e como corrigi-lo.

1. O componente é um objeto, não uma função

A armadilha mais popular. Você importa algo pensando que é um componente, mas é um objeto comum com dados ou configuração.

// ❌ Erroimport userData from './userData';// userData = { name: 'Ana', age: 25 }function App() {  return <userData />; // userData — objeto, não componente!}

// ✅ Correçãoimport UserCard from './UserCard';function App() {  return <UserCard user={userData} />;}

Como verificar: passe o mouse sobre a variável na sua IDE. Se o TypeScript mostrar o tipo object, Record<string, any> ou algo similar sem () => JSX.Element — não é um componente.

2. O componente é uma string ou número

Às vezes, por descuido, você pode passar um literal ou variável de tipo primitivo para o JSX.

// ❌ Erroconst greeting = "Olá, mundo!";function App() {  return <greeting />; // greeting — é string}

// ✅ Correçãofunction App() {  return <h1>{greeting}</h1>; // Usamos como texto, não como componente}

3. O componente foi importado incorretamente

Se você usa export default e importa sem chaves, mas a exportação foi nomeada — você obterá undefined. E undefined no JSX é exatamente esse erro.

// No arquivo Button.tsxexport const Button = () => <button>Clique</button>;// export default está ausente!

// ❌ Erroimport Button from './Button'; // Button = undefinedfunction App() {  return <Button />;}

// ✅ Correçãoimport { Button } from './Button'; // Importação nomeada// ou adicione export default no Button.tsx