导入react-markdown时出现Error: Not supported错误如何解决

你所使用的写法混用了CommonJS和ES Module(ESM)两种模块规范，触发报错的核心原因如下：

1. 动态导入语法import()是ESM专属语法，返回值为Promise对象，无法直接赋值给CommonJS的module.exports做同步导出
2. 最新版react-markdown已经全面适配ESM规范，不再原生支持CommonJS的同步导入方式，强制混用就会抛出Error: Not supported错误

根据你的项目规范选择对应方案即可：

• 如果你的项目本身是ESM规范（package.json中配置了"type": "module"）
  直接使用ESM标准导入语法即可：
  静态导入示例：

  import ReactMarkdown from 'react-markdown'
  

  动态导入示例：

  const ReactMarkdown = (await import('react-markdown')).default
  

• 如果你的项目是CommonJS规范（package.json中无"type": "module"配置）
  可选择以下任意一种方案：
  1. 降级react-markdown到支持CommonJS的最后一个版本v7.1.2，安装命令：
     npm install react-markdown@7.1.2
     安装完成后用CommonJS语法导入即可：

  const ReactMarkdown = require('react-markdown')
  

  2. 用异步逻辑处理动态导入的Promise返回值，示例代码：

  (async () => {
    const ReactMarkdown = (await import('react-markdown')).default
    // 所有使用ReactMarkdown的业务逻辑都放在该异步作用域内
  })()
  

  3. 调整项目规范为ESM，在package.json中添加"type": "module"配置项，之后全局都可以直接使用ESM的import语法导入依赖。

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