Astro.js MDX引入React组件报错：Unexpected ExpressionStatement

可能原因及排查步骤 #

1. 缺失React/MDX集成配置 #

Astro中在MDX里使用React组件，必须同时启用@astrojs/mdx和@astrojs/react集成，否则MDX解析器无法识别JSX语法，会抛出错误（且错误定位可能偏移到frontmatter行）。

检查并修复配置：
打开astro.config.mjs，确保配置包含这两个集成：

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [mdx(), react()],
});

同时确认已安装依赖：

npm install @astrojs/mdx @astrojs/react react react-dom

2. 组件导出/导入不匹配 #

如果组件的导出方式和导入语句不对应，MDX解析时会出现异常（错误定位可能失真）。

检查组件导出：

• 若MapChart.tsx是默认导出：

  export default function MapChart() {
    return <div>Test Chart</div>;
  }
  

  导入语句应为：

  import MapChart from '../components/MapChart.tsx';
  

• 若为命名导出：

  export function MapChart() {
    return <div>Test Chart</div>;
  }
  

  导入语句需加花括号：

  import { MapChart } from '../components/MapChart.tsx';
  

3. MDX文件格式错误 #

确保frontmatter与后续代码的格式正确：

• frontmatter必须用三个短横线包裹，且结束后留空行再写导入语句：

  ---
  title: "Test Post"
  date: 2024-05-20
  ---
  
  import MapChart from '../components/MapChart.tsx';
  
  <MapChart />
  

  若frontmatter后直接跟导入语句，可能导致解析器误判。

4. 组件内部语法错误 #

如果MapChart.tsx本身存在语法错误（比如未闭合标签、TS类型错误），可能导致MDX解析器抛出异常，且错误定位偏移。

简化组件测试：
将MapChart.tsx替换为极简测试组件，验证是否仍报错：

export default function MapChart() {
  return <div>Hello from MapChart</div>;
}

若此时正常渲染，说明原组件存在语法或逻辑问题。

5. Astro版本兼容问题 #

旧版本Astro的MDX集成可能存在JSX解析bug，建议更新到最新稳定版：

npm update astro @astrojs/mdx @astrojs/react

内容的提问来源于stack exchange，提问作者Xevion