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 Klammer

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

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

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

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 sein (<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 eingebaute 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)
• Tailwind-Klasse ist nicht im Build enthalten

Lösung: Verwenden Sie Standard-Tailwind-Utility-Klassen. Für benutzerdefinierte Styles verwenden Sie ein Inline-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 export const mit Pfeilfunktionen wird unterstützt.

Lösung: Wandeln Sie Ihre Funktion in die Pfeilfunktions-Syntax um:

// 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 in Ihrem 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 Builds serverseitig gerendert. Hooks funktionieren nur in clientseitigen React-Komponenten.

Lösung: Erstellen Sie für interaktive Komponenten, die State oder Effekte benötigen, 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' hinzu
3. Importieren und verwenden Sie sie 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 />