Vue3 TypeScript项目集成MDX时报ERR_REQUIRE_ESM错误如何解决

问题原因 #

你遇到的是CommonJS与ESM模块规范的兼容性冲突，核心触发点有两个：

• 你使用的Vue CLI 4.x仅支持CommonJS格式的配置文件，会通过require()加载vue.config.js。如果package.json设置了"type": "module"，所有.js文件会被识别为ESM模块，CommonJS的require()无法直接加载ESM模块，就会抛出ERR_REQUIRE_ESM错误。
• 你用到的remark-gfm@3.x是纯ESM包，仅支持import导入。如果关闭"type": "module"，.js文件默认遵循CommonJS规范，不能直接使用import语句，就会抛出Cannot use import statement outside a module错误。

解决方案 #

方案1：降级兼容依赖（无需修改脚手架版本，适配性最高） #

1. 删除package.json中的"type": "module"配置项
2. 降级remark-gfm到支持CommonJS的版本，执行安装命令：

yarn add remark-gfm@1.0.0

3. 修改vue.config.js为全CommonJS格式，同时补充MDX Vue渲染器配置（这是你之前loader不生效的核心原因）：

const remarkGfm = require('remark-gfm');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('mdx')
      .test(/\.mdx?$/)
      .use('babel-loader')
      .loader('babel-loader')
      .options({plugins: ['@vue/babel-plugin-jsx']})
      .end()
      .use('@mdx-js/loader')
      .loader('@mdx-js/loader')
      .options({
        jsx: true,
        remarkPlugins: [remarkGfm],
        renderer: require.resolve('@mdx-js/vue')
      })
      .end()
  }
}

配置完成后执行yarn serve即可正常运行。

方案2：升级Vue CLI到5.x（支持ESM配置，可保留高版本依赖） #

1. 升级所有Vue CLI相关依赖到5.x版本：

yarn add @vue/cli-service@5 @vue/cli-plugin-babel@5 @vue/cli-plugin-eslint@5 @vue/cli-plugin-typescript@5 -D

2. 保留package.json中的"type": "module"配置
3. 将vue.config.js重命名为vue.config.mjs，补充渲染器配置后内容如下：

import remarkGfm from "remark-gfm";
import mdxVue from "@mdx-js/vue";

export default {
  chainWebpack: config => {
    config.module
      .rule('mdx')
      .test(/\.mdx?$/)
      .use('babel-loader')
      .loader('babel-loader')
      .options({plugins: ['@vue/babel-plugin-jsx']})
      .end()
      .use('@mdx-js/loader')
      .loader('@mdx-js/loader')
      .options({
        jsx: true,
        remarkPlugins: [remarkGfm],
        renderer: mdxVue
      })
      .end()
  }
}

配置完成后执行yarn serve即可正常运行。

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