我正在使用Visx库在Nextjs中构建图表。我使用Visx比例，为此我导入它们如下：import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale"
Visx在内部使用d3的比例，并使用“require”import来访问它们，因此我得到了以下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
1条答案
按热度按时间axr492tv1#
TLDR：确保
visx软件包的版本匹配。我在Next.js项目中安装
@visx/stats包时遇到了类似的ESM错误，当我尝试使用scaleBand函数从@visx/stats绘制箱线图时发生错误，经过调查，我发现错误的原因是@visx/stats和@visx/visx包之间的版本不匹配。我通过降级
@visx/stats的版本来匹配我使用的@visx/visx的版本来解决这个问题。值得注意的是，如果您在项目中使用的其他包的版本不匹配，也可能会发生这个错误。如果您遇到类似的问题，我建议您检查软件包之间的版本是否不匹配，并确保它们彼此兼容。这可能需要调整一些软件包的版本以匹配彼此。
希望这个解释对任何面临类似问题的人有所帮助。