next.js 使用 antv [email protected] 报错 Error [ERR_REQUIRE_ESM]

[Jackeriss]

next.js 使用 antv [email protected] 报错：

Error [ERR_REQUIRE_ESM]: require() of ES Module /xxx/node_modules/.pnpm/[email protected]/node_modules/d3-hierarchy/src/index.js from /xxx/node_modules/.pnpm/@[email protected]/node_modules/@antv/g2/lib/mark/utils.js not supported.
Instead change the require of index.js in /xxx/node_modules/.pnpm/@[email protected]/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 语法

[suwu150]

这个在哪里设置

[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 启动服务也不会出现此错误。

[suwu150]

这个还是不起作用啊
我这个版本

"@antv/g2": "^5.0.11",

"next": "^12.1.0",
"next-compose-plugins": "^2.2.1",
"next-sitemap": "^3.1.15",
"next-transpile-modules": "^9.0.0",

有其他方案吗

[gyt95]

起作用了，但是有警告。

warn You have enabled experimental feature (esmExternals) in next.config.js.
warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

个人觉得这样的解决办法还不太好。希望后续g2官方内部修复。

"@antv/g2": "^5.0.12",
"next": "13.4.4",

[hustcc]

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

[FourLeafTec]

nextjs和remix官方的临时解决方法我这边不生效

这个问题不出在D3那边，D3只是切换到了ESM而已

这个问题应该算是g2和nextjs/remix的兼容问题
G2的默认导出是CJS的，结果用CJS去require ESM被nextjs/remix阻止了，没有细追，猜测是服务端渲染的原因导致的

引入import * as G2 from '@antv/g2/esm'也不对，因为@antv/g2/esm/index.js的import是跑在浏览器里的，这时候就需要type=‘module’的支持了

我这边的临时解决方法是把导入g2放入到useEffect里

useEffect(() => {
    const G2 = require('@antv/g2')
},[])

感觉这个问题其实还是应该g2这边来处理，对nextjs/remix进行兼容

参考:
ant-design/ant-design#40644 (comment)
d3-interpolate 未提供 CJS 产物