错误:将 recharts 与 next.js(和 typescript)一起使用时,不支持 ES 模块的 require()

我看到了一些此类问题,但没有一个真正解决我的问题。我正在使用 next.js 开发一个 webapp(使用 typescript)。在我的应用程序中使用 recharts ,但编译失败并出现以下错误:

Error: Must use import to load ES Module: project_pathnode_modulesd3-shapesrcindex.js
require() of ES modules is not supported.
require() of project_pathnode_modulesd3-shapesrcindex.js from project_pathnode_modulesrechartslibshapeSymbols.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from project_pathnode_modulesd3-shapepackage.json.

现在,我正在使用 next.js 12,它支持开箱即用的 ES 模块,不需要额外的配置。据我了解,问题在于 d3-shape 现在作为 ESM 导入,但使用它的 recharts 仍然是 require 而不是导入它(这是真的,“已编译”的 recharts 包确实使用 require() )

所以问题不在于我的 App,而是 recharts 导入 d3-shapes 的方式,但我该如何解决呢?我是唯一一个遭受它的人是没有意义的。

我想我可以分叉 recharts 并确保它将 d3-shapes 导入为 esm 模块(将 type: "module" 添加到 package.json 文件中),但这非常难看。

有人有什么想法吗?我真的不想去使用其他图表包...

stack overflow Error: require() of ES module is no supported when using recharts with next.js (and typescript)
原文答案

答案:

作者头像

https://github.com/recharts/recharts/issues/2918

在相应的链接上谈论同样的问题。

将 recharts 的包版本降级为“2.1.12”即可解决问题。就我而言,它已经解决了。

作者头像

动态导入似乎解决了这个问题。

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("features/dashboard/Chart"), { ssr: false });
作者头像

如果您在这里遇到了同样的错误,但使用了 Remix Run,请参阅文档的这一部分: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

这就是我的配置文件使其编译的方式:

//in remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [
    "recharts",
    "d3-shape",
    "d3-scale",
    "d3-path",
    "d3-array",
    "d3-time",
    "d3-format",
    "d3-interpolate",
    "d3-time-format",
    "d3-color",
    "internmap",
  ],
};