Next.js执行npm run build失败：ERR_REQUIRE_ESM模块兼容问题

问题详情 #

在Next.js项目中执行npm run build时构建失败，触发Error [ERR_REQUIRE_ESM]，核心原因是：

@antv/g-base/lib/animate/timeline.js中使用require()引入ES模块d3-interpolate/src/index.js的方式不被支持，官方要求将该require()改为CommonJS兼容的动态import()。

该错误最终导致/yourOrders页面的数据收集流程失败，完整错误栈如下：

位于Object. (D:\bongodeshi\frontend\node_modules@antv\g-base\lib\animate\timeline.js:5:24)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g-base\lib\abstract\canvas.js:7:18)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g-base\lib\index.js:17:16)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\dependents.js:6:16)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\util\scale.js:7:20)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\util\axis.js:6:15)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\facet\facet.js:7:14)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\facet\index.js:5:15)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\chart\view.js:8:15)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\chart\chart.js:8:38)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\chart\index.js:7:15)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\core.js:10:15)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2\lib\index.js:6:14)
位于Object. (D:\bongodeshi\frontend\node_modules@antv\g2plot\lib\index.js:7:31)
位于Object. (D:\bongodeshi\frontend\node_modules@ant-design\plots\lib\components\area\index.js:41:16)
位于Object. (D:\bongodeshi\frontend\node_modules@ant-design\plots\lib\index.js:21:30)
位于Object. (D:\bongodeshi\frontend\node_modules@ant-design\charts\lib\index.js:18:14)
位于3872 (D:\bongodeshi\frontend\.next\server\pages\yourOrders.js:42:32)
位于webpack_require (D:\bongodeshi\frontend\.next\server\webpack-runtime.js:25:42)
位于webpack_exec (D:\bongodeshi\frontend\.next\server\pages\yourOrders.js:2069:39)
位于D:\bongodeshi\frontend\.next\server\pages\yourOrders.js:2070:77
位于webpack_require.X (D:\bongodeshi\frontend\.next\server\webpack-runtime.js:108:21)
位于D:\bongodeshi\frontend\.next\server\pages\yourOrders.js:2070:47
位于Object. (D:\bongodeshi\frontend\.next\server\pages\yourOrders.js:2073:3)
位于Object.requirePage (D:\bongodeshi\frontend\node_modules\next\dist\server\require.js:88:12)
位于D:\bongodeshi\frontend\node_modules\next\dist\server\load-components.js:37:73
位于async Object.loadComponents (D:\bongodeshi\frontend\node_modules\next\dist\server\load-components.js:37:26)
位于async D:\bongodeshi\frontend\node_modules\next\dist\build\utils.js:832:32
位于async Span.traceAsyncFn (D:\bongodeshi\frontend\node_modules\next\dist\trace\trace.js:79:20)
错误代码：'ERR_REQUIRE_ESM'

随后触发的构建错误：

错误：无法为/yourOrders收集页面数据
位于D:\bongodeshi\frontend\node_modules\next\dist\build\utils.js:949:15
位于process.processTicksAndRejections (node:internal/process/task_queues:95:5)
错误类型：'Error'

解决方案 #

1. 升级相关依赖包（优先推荐） #

这个问题是依赖包内部的ESM/CJS兼容性bug，优先尝试升级相关包到最新版本，看官方是否已经修复：

• 执行升级命令：

  npm update @antv/g-base @antv/g2 @ant-design/charts @ant-design/plots
  

• 如果升级后仍然报错，可以尝试锁定d3-interpolate到支持CommonJS的旧版本（比如3.0.1）：

  npm install d3-interpolate@^3.0.1 --save
  

2. 临时修改依赖源码（配合patch-package持久化） #

如果升级无法解决，可以手动修改@antv/g-base的源码，将require改为动态import：

• 找到文件：node_modules/@antv/g-base/lib/animate/timeline.js
• 将原代码中的：

  const interpolate = require('d3-interpolate/src/index.js');
  

  修改为动态导入形式（根据代码上下文选择同步或异步写法）：

  // 异步写法（适合在函数内使用）
  let interpolate;
  import('d3-interpolate/src/index.js').then(module => {
    interpolate = module.default || module;
  });
  
  // 或者在异步函数内使用await
  const interpolateModule = await import('d3-interpolate/src/index.js');
  const interpolate = interpolateModule.default || interpolateModule;
  

• 为了避免重新安装依赖后修改丢失，使用patch-package保存补丁：
  1. 安装依赖：npm install patch-package --save-dev
  2. 修改源码后执行：npx patch-package @antv/g-base
  3. 后续执行npm install时，补丁会自动应用。

3. 配置Next.js转译ESM包 #

在next.config.js中配置transpilePackages，让Next.js转译相关的AntV包，解决ESM/CJS兼容问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@antv/g-base', '@antv/g2', '@ant-design/charts', '@ant-design/plots'],
}

module.exports = nextConfig;

修改后重新执行npm run build即可。

4. 动态导入图表组件（跳过SSR） #

错误发生在SSR阶段（页面数据收集时），可以将/yourOrders页面中的图表组件改为动态导入，并关闭SSR：

import dynamic from 'next/dynamic';

// 替换成你的图表组件路径
const YourOrderChart = dynamic(() => import('../components/YourOrderChart'), {
  ssr: false,
});

这样组件只会在客户端加载，避免SSR时触发兼容错误。

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