JSX-Element hat keinen Konstruktor? TypeScript-Fehler verstehen

Einleitung: Ihre Komponente "schweigt", weil sie nicht erzeugt werden kann

Sie programmieren mit TypeScript und React, alles läuft wie geschmiert. Und dann – zack! – wirft Ihnen der Compiler eine rätselhafte Meldung entgegen:

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

Kommt Ihnen das bekannt vor? Wenn Sie Anfänger sind, kann dieser Fehler wie ein Zauberspruch aus einer Parallelwelt wirken. Aber keine Panik. In Wirklichkeit ist es ganz einfach: TypeScript sagt Ihnen, dass das, was Sie als JSX-Komponente verwenden möchten, weder eine Funktion noch eine Klasse ist, die "aufgerufen" oder "konstruiert" werden kann.

In diesem Artikel erklären wir diesen Fehler ganz einfach: warum er auftritt, wie man ihn behebt und was diese "construct or call signatures" überhaupt bedeuten. Los geht's – wir klären das mit Spaß und Beispielen!

Was bedeuten "construct or call signatures"?

Stellen wir uns vor, eine JSX-Komponente sei ein Restaurant. Sie gehen hinein, setzen sich an einen Tisch (übergeben props) und warten darauf, dass Ihnen das Essen gebracht wird (return JSX). Aber wenn das Restaurant wegen Renovierung geschlossen ist oder gar nicht existiert, können Sie keine Bestellung aufgeben.

In TypeScript ist eine "construct signature" die Fähigkeit einer Klasse, mit new aufgerufen zu werden (wie ein Konstruktor). Eine "call signature" ist die Fähigkeit einer Funktion, direkt aufgerufen zu werden. JSX-Komponenten in React können entweder Funktionen oder Klassen sein. Wenn TypeScript bei Ihrer "Komponente" weder das eine noch das andere sieht, gibt es einen Fehler aus.

Typischer Fall:

// Falschconst MyComponent = someObject;// <MyComponent /> — Fehler!

// Richtigconst MyComponent: React.FC<Props> = (props) => {  return <div>Hallo</div>;};// <MyComponent /> — funktioniert

Der Fehler tritt auf, wenn Sie versuchen, etwas in JSX zu verwenden, das keine Funktion oder Klasse ist. Zum Beispiel einen String, eine Zahl, ein Objekt oder eine nicht initialisierte Variable.

Die Top-5 Ursachen des Fehlers (mit TypeScript-Codebeispielen)

Lassen Sie uns die häufigsten Szenarien durchgehen, in denen Sie in diese Falle tappen können. Für jeden Fall zeige ich, wie das Problem aussieht und wie man es behebt.

1. Die Komponente ist ein Objekt, keine Funktion

Die häufigste Falle. Sie importieren etwas und denken, es sei eine Komponente, aber es ist ein normales Objekt mit Daten oder einer Konfiguration.

// ❌ Fehlerimport userData from './userData';// userData = { name: 'Anna', age: 25 }function App() {  return <userData />; // userData — Objekt, keine Komponente!}

// ✅ Korrekturimport UserCard from './UserCard';function App() {  return <UserCard user={userData} />;}

So prüfen Sie: Fahren Sie mit der Maus über die Variable in Ihrer IDE. Wenn TypeScript den Typ object, Record<string, any> oder ähnliches ohne () => JSX.Element anzeigt, ist es keine Komponente.

2. Die Komponente ist ein String oder eine Zahl

Manchmal kann man aus Unachtsamkeit ein Literal oder eine Variable mit einem primitiven Typ in JSX übergeben.

// ❌ Fehlerconst greeting = "Hallo, Welt!";function App() {  return <greeting />; // greeting ist ein string}

// ✅ Korrekturfunction App() {  return <h1>{greeting}</h1>; // Als Text verwenden, nicht als Komponente}

3. Die Komponente wurde falsch importiert

Wenn Sie export default verwenden und ohne geschweifte Klammern importieren, der Export aber benannt war, erhalten Sie undefined. Und undefined in JSX ist genau dieser Fehler.

// In Datei Button.tsxexport const Button = () => <button>Klick</button>;// export default fehlt!

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

// ✅ Korrekturimport { Button } from './Button'; // Benannter Import// oder fügen Sie export default in Button.tsx hinzu