“错误：ES 模块的 require()”使用 Visx 和 Nextjs

Question

我正在使用 Visx 库在 Nextjs 中构建图表。我使用的是 Visx 量表，我按如下方式导入它们：

import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale"

在内部，Visx 使用 d3 的比例并使用“require”导入来访问它们，因此我收到以下 Nextjs 错误：

Error: require() of ES Module \node_modules\d3-scale\src\index.js from \node_modules\@visx\scale\lib\scales\band.js not supported. Instead change the require of index.js in \node_modules\@visx\scale\lib\scales\band.js to a dynamic import() which is available in all CommonJS modules.

我知道该错误是不言自明的，但我想知道除了更改库的文件之外是否还有另一种解决方案，或者无论如何，最好的解决方案是什么。

我还尝试更改 Visx 比例的导入，但出现另一个错误：

Cannot use import statement outside a module

Answer 1

TLDR：确保visx包的版本匹配。

@visx/stats当我在 Next.js 项目中安装该包时，我遇到了类似的 ESM 错误。scaleBand当我尝试使用该函数从 绘制箱线图时发生错误@visx/stats。经过一番排查，发现错误的原因是@visx/stats和@visx/visx包之间的版本不匹配。

我通过降级版本@visx/stats以匹配我正在使用的版本解决了这个问题@visx/visx。值得注意的是，如果项目中使用的其他包版本不匹配，也可能会出现此错误。

如果您遇到类似的问题，我建议您检查软件包之间是否存在版本不匹配的情况，并确保它们彼此兼容。这可能需要调整某些软件包的版本以相互匹配。

希望这个解释可以帮助任何面临类似问题的人。