Benutzerdefinierte React-Komponenten

Fehler: Expected component 'MyComponent' to be defined

Ursachen:

• Der Komponentenname verwendet kein PascalCase (muss mit einem Großbuchstaben beginnen).
• Syntaxfehler in der Komponentendefinition
• Fehlendes schließendes Tag oder fehlende schließende Klammer

Lösung: Überprüfen Sie, ob Ihr Export diesem Muster folgt:

export const MyComponent = ({ prop }) => (
  <div>{prop}</div>
);

Fehler: Der Build schlägt mit einem Hinweis auf Babel oder JSX-Syntax fehl.

Ursachen:

• Ungültige JSX-Syntax in Ihrer Komponente
• Nicht geschlossene Tags oder Klammern
• Verwendung nicht unterstützter JavaScript-Funktionen

Lösung: Überprüfen Sie, ob Ihr JSX gültig ist. Häufige Probleme:

• Alle Tags müssen geschlossen werden (<img loading="lazy" /> statt <img loading="lazy">).
• Verwenden Sie className statt class.
• Umschließen Sie mehrere Elemente mit einem Fragment <>...</> oder einem übergeordneten Element.

Warnung: Inline component(s) override built-in: Note

Ursache: Ihre Inline-Komponente hat denselben Namen wie eine integrierte Komponente.

Lösung: Benennen Sie Ihre Komponente um, um Konflikte zu vermeiden:

// Instead of: export const Note = ...
export const CustomNote = ({ children }) => (
  <div className="my-note">{children}</div>
);

Problem: Tailwind-Klassen funktionieren nicht.

Ursachen:

• Verwendung von CSS-in-JS oder Inline-Style-Objekten (eingeschränkte Unterstützung)
• Die Tailwind-Klasse ist nicht im Build enthalten

Lösung: Verwenden Sie standardmäßige Tailwind-Utility-Klassen. Verwenden Sie für benutzerdefinierte Stile die style-Prop mit einfachen Werten:

export const Highlight = ({ children }) => (
  <span style={{ backgroundColor: '#ffeb3b' }}>{children}</span>
);

Problem: Eine mit export function definierte Komponente wird nicht gerendert.

Ursache: Nur die Syntax einer Arrow Function mit export const wird unterstützt.

Lösung: Konvertieren Sie Ihre Funktion in die Syntax einer Arrow Function:

// Instead of:
export function MyComponent({ prop }) {
  return <div>{prop}</div>;
}

// Use:
export const MyComponent = ({ prop }) => (
  <div>{prop}</div>
);

Problem: Eine Komponente mit Unterstrichen oder Sonderzeichen funktioniert nicht.

Ursache: Komponentennamen müssen gültige PascalCase-Bezeichner sein (nur Buchstaben und Zahlen).

Lösung: Verwenden Sie im Komponentennamen nur Buchstaben und Zahlen:

// Instead of: export const Hero_Card = ...
// Instead of: export const my-component = ...
export const HeroCard = ({ title }) => (
  <div>{title}</div>
);

Fehler: ReferenceError: useState is not defined

Ursache: React-Hooks sind in Inline-Komponenten nicht verfügbar. Inline-Komponenten werden während des Build-Prozesses serverseitig gerendert, Hooks funktionieren nur in clientseitigen React-Komponenten.

Lösung: Erstellen Sie für interaktive Komponenten, die State oder Effekte benötigen, stattdessen eine Snippet-Datei:

1. Erstellen Sie eine Datei in Ihrem Verzeichnis /snippets (z. B. /snippets/counter.tsx).
2. Fügen Sie am Anfang der Datei 'use client' ein.
3. Importieren und verwenden Sie die Datei in Ihrer MDX-Datei.

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

import { Counter } from '/snippets/counter';

<Counter />