Next.js项目使用react-markdown报错Must use import to load ES Module怎么办

该错误是因为你安装的新版react-markdown仅支持ES模块规范，而Next.js 12默认在服务端渲染阶段使用CommonJS的require语法加载依赖，加上Node 14对ES模块的兼容支持不完善，两者不匹配导致报错。

• 方法1：降级react-markdown到兼容CommonJS的版本
  react-markdown v7及更早版本同时支持ES模块和CommonJS规范，直接安装低版本即可解决问题，执行命令：
  yarn add react-markdown@7

• 方法2：在Next.js配置中添加转译规则
  如果你需要使用新版react-markdown的特性，可以在next.config.js中添加配置，指定Next.js主动转译react-markdown模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有其他配置
  transpilePackages: ['react-markdown']
}

module.exports = nextConfig

修改配置后重启项目即可生效。

• 方法3：使用动态导入关闭服务端渲染
  如果上述方案都不生效，可以用Next.js自带的dynamic导入能力，让react-markdown仅在客户端加载，跳过服务端渲染阶段的CommonJS加载逻辑，修改你的Markdown组件代码如下：

import React from 'react'
import dynamic from 'next/dynamic'

const ReactMarkdown = dynamic(() => import('react-markdown'), { ssr: false })

export function Markdown({ markdown }: { markdown: string }) {
  return (
    <article className="prose-sm">
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </article>
  )
}

可选优化建议 #

条件允许的话建议将Node版本升级到16.x及以上，能避免更多ES模块兼容相关的问题。

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