next.js 使用 antv g2@5.0.0-beta.4 报错 Error [ERR_REQUIRE_ESM]

[Jackeriss]

next.js 使用 antv g2@5.0.0-beta.4 报错：

Error [ERR_REQUIRE_ESM]: require() of ES Module /xxx/node_modules/.pnpm/d3-hierarchy@3.1.2/node_modules/d3-hierarchy/src/index.js from /xxx/node_modules/.pnpm/@antv+g2@5.0.0-beta.4/node_modules/@antv/g2/lib/mark/utils.js not supported.
Instead change the require of index.js in /xxx/node_modules/.pnpm/@antv+g2@5.0.0-beta.4/node_modules/@antv/g2/lib/mark/utils.js to a dynamic import() which is available in all CommonJS modules.

应该是d3-interpolate升级导致的。
相似问题：
FormidableLabs/victory#1957

[Jackeriss]

package.json 中指定d3-interpolate版本可暂时解决

"resolutions": {
    "d3-interpolate": "2.0.1"
},

[Jackeriss]

对于 next.js 项目，在package.json中添加 "type":"module", 并将项目中所有用require()的地方改为import即可。可参考：https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
对于 remix.js 项目，remix 官方文档对无法引入 ESM-only 包有详细说明:
https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

[visiky]

1"

d3-interpolate 3.x 以下的貌似有漏洞，可以看下这个 PR：antvis/G#1216

然后报错原因是因为 d3-interpolate 3.x 版本 export 的内容是：

  "exports": {
    "umd": "./dist/d3-interpolate.min.js",
    "default": "./src/index.js"
  },

所以有两个解法：
1、设置 'd3-interpolate': 'd3-interpolate/dist/d3-interpolate.min.js',
2、将 node_modules/d3-interpolate 也编译处理为 es5 语法

[hengkx]

官方没有解决方法吗？

[tval2]

Is anyone able to use antv with antd, react, and next.js? Getting a simple line chart throws all of these ES module d3-interpolate errors above. I don't think antv has been updated since July.

[Jackeriss]

使用最新版 next.js 13.4.3 和 g2 5.0.9 该问题依然存在，在 package.json 中指定 d3-interpolate 版本虽然能解决但又会报错
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead.

next.js 官方文档对此报错给出的解决方法是 https://nextjs.org/docs/messages/import-esm-externals
其中第三条在next.config.js中添加experimental.esmExternals: 'loose'配置项可以解决此问题。
另外使用 Turbopack 启动服务也不会出现此错误。

[hustcc]

关于 d3-interpolate 在 next 中的报错，也欢迎大家去 d3-interpolate 的 issue 中提交问题。这个问题需要他们官方去解决。