NodeJS 如何解决“[ERR_REQUIRE_ESM]:在使用D3.js 7.0.0和Next.js 11.0.1时,必须使用import来加载ES模块”?

hc8w905p  于 2023-05-22  发布在  Node.js
关注(0)|答案(3)|浏览(173)

当尝试将D3与Next.js一起使用时,当将D3.js v7.0.0与Next.js v11.0.1一起使用时,我无法克服此错误。
[ERR_REQUIRE_ESM]:必须使用导入来加载ES模块

  • 我试了next-transpile-modules没有运气
  • 我让D3.js v7.0.0与create-react-app一起工作,但我需要D3与Next.js v11.0.1一起工作

我使用npm i d3安装了D3.js。我正在导入import * as d3 from "d3"。使用Node v15.8.0和React v17.0.2

30byixjq

30byixjq1#

如果您只需要从ES6+特性中“导入”,只需在package.json文件中添加'type': 'module'即可。否则使用babel为您的应用启用所有ES6+功能。

qlzsbp2j

qlzsbp2j2#

从v12开始,Next.js对ES模块提供了原生支持。所以如果有人遇到这个问题,只需升级您的Next.js版本。D3和其他只提供ESM入口点的包现在完全受支持,而无需编译它们。
参考:https://nextjs.org/blog/next-12#es-modules-support-and-url-imports
此支持在Next.js v11.1中是实验性的,可以使用以下配置启用:

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true }
}

参考:https://nextjs.org/blog/next-11-1#es-modules-support

vulvrdjw

vulvrdjw3#

对于新版本,请使用'loose'选项

module.exports = {
    // Prefer loading of ES Modules over CommonJS
    experimental: { esmExternals: 'loose' }
}

相关问题