Next.js11引入react-markdown@7.0.1出现ES Module加载错误如何解决？

react-markdown 从v7.0.0版本开始，仅以ES Module规范进行包构建发布，不再支持CommonJS规范的require导入方式。你当前使用的Next.js 11版本对ES Module类型的第三方依赖支持不完善，编译时默认会对node_modules下的依赖使用CommonJS的require逻辑加载，因此触发了该报错。就算你在package.json中添加"type": "module"配置，也无法解决Next 11内部加载依赖的逻辑问题。

下面提供三个可落地的方案，你可以根据自己的需求选择：

• 方案一（改造成本最低）：降级react-markdown到同时支持ES Module和CommonJS的v6版本
  执行命令卸载现有版本并安装兼容版本：

npm uninstall react-markdown && npm install react-markdown@6.0.2

安装完成后原有代码不需要任何修改就可以正常运行。

• 方案二（保留最新react-markdown版本）：升级Next.js到12及以上版本
  Next.js 12开始原生完善了对ES Module依赖的支持，升级后即可正常加载react-markdown v7版本，执行升级命令：

npm install next@12 react@17 react-dom@17

注意升级后如果用到其他旧依赖，需要自行检查兼容性。另外react-markdown v7版本已经废弃了source属性，你需要把原有代码里的<ReactMarkdown source={posts.Content} escapeHtml={false} />改成<ReactMarkdown children={posts.Content} escapeHtml={false} />才能正常渲染内容。

• 方案三（不降级依赖也不升级框架）：使用next-transpile-modules转译react-markdown
  先安装转译工具：

npm install next-transpile-modules --save-dev

然后修改你的next.config.js配置文件：

const withTranspileModules = require('next-transpile-modules')(['react-markdown']);

module.exports = withTranspileModules({
  // 你项目中原有的其他Next.js配置
});

该配置会让Next.js在编译时将react-markdown转译为兼容CommonJS规范的代码，即可正常加载。

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