使用mdx-bundler与Next.js导入自定义组件失败问题

错误原因 #

问题核心在于**rehype-raw插件无法处理MDX中的ESM导入语句**。rehype-raw的设计目标是将原始HTML/JSX转换为HAST（超文本抽象语法树），但它仅识别标准HTML节点，对MDX特有的mdxjsEsm节点（对应import语句的AST节点）完全不兼容，因此处理时直接抛出编译错误。

另外你已经通过<Component components={{CookieSettings}}>的方式向MDX注入了组件，完全不需要在从Strapi获取的MDX内容里重复写import CookieSettings语句——这是冗余操作，也是触发错误的直接诱因。

解决方案 #

方案1：移除MDX中的冗余导入（推荐） #

直接修改Strapi中存储的MDX内容，删掉import语句，只保留组件使用代码：

<CookieSettings />

Some content...

这种方式最简洁，也完全符合你通过components属性注入组件的设计逻辑。

方案2：保留导入时调整插件配置（特殊场景用） #

如果因业务需求必须在MDX中保留import语句，需要给rehype-raw配置跳过MDX特有节点的规则：
修改prepareMdx函数中的rehype插件配置：

export async function prepareMdx(source: string) {
  return bundleMDX({
    source,
    cwd: process.cwd(),
    esbuildOptions(options) {
      options.target = 'esnext';
      return options;
    },
    mdxOptions(options) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkGfm,
        remarkUnwrapImages,
      ];
      options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        // 配置rehype-raw跳过mdxjsEsm节点
        [rehypeRaw, { passThrough: ['mdxjsEsm'] }],
        imageMetadata,
        rehypeSlug,
      ];
      return options;
    },
  });
}

注意：此时MDX中的import路径必须是相对于process.cwd()的正确路径，否则mdx-bundler会无法找到组件文件。

内容的提问来源于stack exchange，提问作者Atomike-Toxic