[英]How do I resolve "[ERR_REQUIRE_ESM]: Must use import to load ES Module" when using D3.js 7.0.0 with Next.js 11.0.1?
When trying to use D3 with Next.js, I cannot get past this error when using D3.js v7.0.0 with Next.js v11.0.1.:尝试将 D3 与 Next.js 一起使用时,在将 D3.js v7.0.0 与 Next.js v11.0.1 一起使用时,我无法克服此错误:
[ERR_REQUIRE_ESM]: Must use import to load ES Module
[ERR_REQUIRE_ESM]:必须使用import加载ES模块
next-transpile-modules
with no lucknext-transpile-modules
没有运气create-react-app
but I need D3 working with Next.js v11.0.1create-react-app
一起工作,但我需要 D3 与 Next.js v11.0.1 一起工作I installed D3.js using npm i d3
.我使用
npm i d3
安装了 D3.js。 I'm importing with import * as d3 from "d3"
.我正在使用
import * as d3 from "d3"
。 Using Node v15.8.0 and React v17.0.2使用 Node v15.8.0 和 React v17.0.2
if you only need "import" from ES6+ features just add 'type': 'module'
in your package.json file.如果您只需要从 ES6+ 特性中“导入”,只需在package.json文件中添加
'type': 'module'
。 Otherwise use babel for enabling all ES6+ features for your app.否则,请使用babel为您的应用启用所有 ES6+ 功能。
Since v12, Next.js has native support for ES modules.从 v12 开始,Next.js 原生支持 ES 模块。 So if anyone is facing this issue, just upgrade your Next.js version.
因此,如果有人遇到此问题,只需升级您的 Next.js 版本。 D3 and other packages that provide only the ESM entrypoints are now fully supported without any need to transpile them.
现在完全支持 D3 和其他仅提供 ESM 入口点的包,无需转换它们。
Reference: https://nextjs.org/blog/next-12#es-modules-support-and-url-imports参考: https : //nextjs.org/blog/next-12#es-modules-support-and-url-imports
This support was experimental in Next.js v11.1, and can be enabled using the following config:这种支持在 Next.js v11.1 中是实验性的,可以使用以下配置启用:
// next.config.js
module.exports = {
// Prefer loading of ES Modules over CommonJS
experimental: { esmExternals: true }
}
Reference: https://nextjs.org/blog/next-11-1#es-modules-support参考: https : //nextjs.org/blog/next-11-1#es-modules-support
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.