d3-interpolate 未提供 CJS 产物

[xiaoiver]

之前升级到了 3.x 版本，为了解决 snyk 问题。

main 指向了 ESM 版本：
https://github.com/d3/d3-interpolate/blob/main/package.json#L28
2.x 倒是提供了：https://github.com/d3/d3-interpolate/blob/df0475ae37eb410e82b6f6ea667a81dec83a71b0/package.json#L18

导致 next.js 中使用报错：
ant-design/ant-design-charts#1802

如果不想退回到 2.x 版本，应该只能 fork 一份自己发布了。

[EvgeniyBudaev]

@xiaoiver
Before adding to package.json: i get an error:
[server] /home/project/node_modules/@antv/g-base/lib/animate/timeline.js:5
[server] var d3_interpolate_1 = require("d3-interpolate"); // 目前整体动画只需要数值和数组的差值计算
[server] ^
[server] Error [ERR_REQUIRE_ESM]: require() of ES Module /home/project/node_modules/d3-interpolate/src/index.js from /home/project/node_modules/@antv/g-base/lib/animate/timeline.js not supported.
[server] Instead change the require of index.js in /home/project/node_modules/@antv/g-base/lib/animate/timeline.js to a dynamic import() which is available in all CommonJS modules.

I added to package.json:
"overrides": { "d3-interpolate": "2.0.1" }

I get an error:
[server] /home/project/node_modules/@antv/path-util/lib/parse-path.js:3
[server] var lodash_es_1 = require("lodash-es");
[server] ^
[server] Error [ERR_REQUIRE_ESM]: require() of ES Module /home/project/node_modules/lodash-es/lodash.js from /home/project/node_modules/@antv/path-util/lib/parse-path.js not supported.
[server] Instead change the require of lodash.js in /home/project/node_modules/@antv/path-util/lib/parse-path.js to a dynamic import() which is available in all CommonJS modules.

In @antv/g-base 0.5.12, the major version of the d3-interpolate dependency has been raised from 1 to 3. Package.json says "type": "module". @antv/g-base is compiled with typescript under commonjs so everything breaks.

Please, can you elaborate on how to fix this?

[xiaoiver]

vercel/next.js#25454

I will try to fork d3-color & d3-interpolate:

• https://github.com/antvis/d3-color
• https://github.com/antvis/d3-interpolate

Then remove type: 'module' in their package.json and publish @antv/g-base@0.5.13.

But I found g2plot has dependency of path-util@3 -> lodash-es which has the same problem. After downgrading to path-util@2 everything seems OK.

[xiaoiver]

But I found all the d3 packages already moved to ESM module.
d3/d3#3469

So it seems impossible to fork all these d3 packages. I will try to find a better solution from Next.js docs.
https://nextjs.org/docs/advanced-features/compiler#module-transpilation

[EvgeniyBudaev]

@xiaoiver I have created a simple project. https://github.com/EvgeniyBudaev/remix-ant/blob/main/app/routes/index.tsx
I get an error:

Error [ERR_REQUIRE_ESM]: require() of ES Module \remix-ant\node_modules\d3-interpolate\src\index.js from \remix-ant\node_modules\@antv\g-base\lib\animate\timeline.js not supported.
Instead change the require of index.js in \remix-ant\node_modules\@antv\g-base\lib\animate\timeline.js to a dynamic import() which is available in all CommonJS modules.

[JonasJonny]

@xiaoiver Victory charts "solved it" with https://www.npmjs.com/package/victory-vendor (More info at https://formidable.com/blog/2022/victory-esm/).
Then Recharts implemented it recharts/recharts@bcb199c.