Next.js集成react-markdown运行报Not supported错误如何解决

你遇到的报错是依赖规范与运行环境不兼容导致的：

• 你使用的react-markdown@7.x、rehype-raw@6.x、remark-gfm@2.x均为仅支持ESM导入规范的包
• 你当前使用的Next.js 11.1.2版本默认仅支持CommonJS规范的依赖导入，无法直接加载ESM包，运行时就会抛出"Not supported"错误

提供两种可落地的修复方式，你可以根据项目情况选择：

方案1：降级依赖到兼容CommonJS的版本（改造成本最低） #

直接将相关依赖替换为支持CommonJS的历史版本即可，现有组件代码不需要做任何调整：

1. 修改package.json中的依赖版本：

"dependencies": {
  "next": "11.1.2",
  "next-images": "^1.8.1",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-markdown": "^6.0.3",
  "rehype-raw": "^5.1.0",
  "remark-gfm": "^1.0.0"
}

2. 删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件
3. 重新执行npm install或yarn install安装依赖，重启项目即可

方案2：升级Next.js到支持ESM的版本 #

如果你需要使用高版本react-markdown及相关插件的新特性，可以升级框架适配ESM规范：

1. 将Next.js升级到12.1.0及以上版本
2. 在项目根目录的package.json中新增配置项："type": "module"
3. 把项目中所有CommonJS格式的require导入、module.exports导出调整为ESM的import/export格式，重启项目即可

额外提示：你当前组件代码中已经导入了remark-gfm但没有传入插件配置，如果需要支持GFM扩展语法（表格、任务列表、删除线等），可以给ReactMarkdown组件补充remarkPlugins={[remarkGfm]}属性。

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