自定义 React 组件

Error: Expected component 'MyComponent' to be defined

Causes:

• Component name doesn't use PascalCase (must start with capital letter)
• Syntax error in the component definition
• Missing closing tag or parenthesis

Solution: Check that your export follows this pattern:

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

Error: Build fails mentioning Babel or JSX syntax

Causes:

• Invalid JSX syntax in your component
• Unclosed tags or brackets
• Using unsupported JavaScript features

Solution: Verify your JSX is valid. Common issues:

• All tags must be closed (<img loading="lazy" /> not <img loading="lazy">)
• Use className instead of class
• Wrap multiple elements in a fragment <>...</> or parent element

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

Cause: Your inline component has the same name as a built-in component.

Solution: Rename your component to avoid conflicts:

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

Issue: Tailwind classes aren't working

Causes:

• Using CSS-in-JS or inline style objects (limited support)
• Tailwind class not included in the build

Solution: Use standard Tailwind utility classes. Use an inline style prop with simple values for custom styles:

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

Issue: Component defined with export function doesn't render

Cause: Only export const arrow function syntax is supported.

Solution: Convert your function to arrow function syntax:

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

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

Issue: Component with underscores or special characters doesn't work

Cause: Component names must be valid PascalCase identifiers (letters and numbers only).

Solution: Use only letters and numbers in your component name:

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

Error: ReferenceError: useState is not defined

Cause: React hooks are not available in inline components. Inline components are server-rendered during the build. Hooks only work in client-side React components.

Solution: Create a snippet file for interactive components that need state or effects:

1. Create a file in your /snippets directory (e.g., /snippets/counter.tsx)
2. Add 'use client' at the top of the file
3. Import and use it in your MDX

'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 />