配置Next.js使用ESM时出现require不支持ES模块错误如何解决

Error: Must use import to load ES Module 报错本质是 Node v14.x 对 ESM 规范的支持未完全默认启用，且 Next.js 11 的 ESM 适配存在版本兼容特性，导致服务端加载编译后文件时混用了 require 和 ESM 规范。

按照以下步骤操作即可解决问题：

• 1. 适配 Node 14 的 ESM 实验性支持
     修改 package.json 中的项目启动脚本，添加 Node 实验性 ESM 标识：

  "scripts": {
    "dev": "node --experimental-modules node_modules/next/dist/bin/next dev",
    "build": "node --experimental-modules node_modules/next/dist/bin/next build",
    "start": "node --experimental-modules node_modules/next/dist/bin/next start"
  }
  

• 2. 补充 Next.js ESM 兼容配置
     在你的 next.config.cjs 中添加实验性 ESM 配置项：

  module.exports = {
    // 保留你原有的其他配置
    experimental: {
      esmExternals: true,
      // 如果你有第三方纯ESM依赖，也可以加入到下面的数组中触发编译转译
      transpileModules: []
    }
  }
  

• 3. 全项目统一模块规范
     检查所有你编写的 .js 文件，禁止使用 require() 语法引入任何你自己编写的项目文件，全部替换为 import 语法，避免两种模块规范混用。
• 4. 可选最优方案：升级 Node 版本
     Node v14 已停止官方维护，且对 ESM 的支持属于实验性阶段，直接升级到 Node v16.x 及以上长期支持版本，不需要添加实验性 flag 即可原生兼容 Next.js 11 的 ESM 特性，可直接解决该兼容问题。

所有配置修改完成后，再次删除 node_modules、.next 文件夹和 package-lock.json，重新执行 npm install 后启动项目即可。

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