Lỗi Astro Starlight: Import Svelte Components trong MDX

Lỗi Astro Starlight: Import Svelte Components trong MDX

Lỗi

[@mdx-js/rollup] Could not parse import/exports with acorn
Unexpected token
file: src/content/docs/markdown/components-terminal-code.mdx:56:2

Nguyên nhân

Trong Starlight/Astro, bạn không thể import Svelte components trực tiếp trong MDX files:

---
title: My Page
---

import Terminal from './components/Terminal.svelte';  // ❌ LỖI!
import CodeBlock from './components/CodeBlock.svelte';  // ❌ LỖI!

<Terminal />

Cách khắc phục

Cách 1: Xóa file bị lỗi

Nếu file MDX cố import Svelte components, hãy xóa file đó.

Cách 2: Không dùng custom components trong MDX

Sử dụng standard Markdown thay vì custom components:

---
title: My Page
---

## Terminal Example

\`\`\`bash
$ npm install -g @anthropic-ai/claude-code
> Đang cài đặt...
✓ Cài đặt thành công
\`\`\`

Cách 3: Sử dụng Starlight Component Mapping

Cấu hình custom components trong astro.config.mjs:

starlight({
  components: {
    // Map markdown elements to custom components
    Blockquote: './src/components/mdx/Blockquote.astro',
  },
}),

Cách 4: Sử dụng Astro Components thay vì Svelte

Astro components có thể được sử dụng trong MDX:

---
title: My Page
---

import Terminal from './components/Terminal.astro';

<Terminal title="Install">
  npm install -g @anthropic-ai/claude-code
</Terminal>

Kết luận

Starlight có giới hạn về việc sử dụng custom components trong MDX. Cách tốt nhất là:

1. Sử dụng standard Markdown
2. Hoặc tạo Astro components (không phải Svelte)
3. Hoặc chấp nhận một số khác biệt nhỏ về giao diện