将 D3.js 7.0.0 与 Next.js 11.0.1 一起使用时，如何解决“[ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块”？

Posted 2023-02-22

【中文标题】将 D3.js 7.0.0 与 Next.js 11.0.1 一起使用时，如何解决“[ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块”？

【英文标题】：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?

【发布时间】：2021-09-08 13:21:13

【问题描述】：

当尝试将 D3 与 Next.js 一起使用时，当将 D3.js v7.0.0 与 Next.js v11.0.1 一起使用时，我无法克服此错误：

[ERR_REQUIRE_ESM]: 必须使用 import 加载 ES Module

我试过 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

【问题讨论】：

仍然不确定为什么 D3.js v7 和 Next.js v11 不能很好地结合使用。根据 D3 Slack 社区的建议，我降级到 D3.js v6.7.0 现在 import * as d3 from "d3" 与 useEffect React 挂钩来操作 DOM。

降级 d3 也对我有用！

也发生在我身上。 NextJS 或 D3 是否存在错误文件？

@Ray 某处有问题吗？这很严重吧？

请注意，动态导入适用于 d3@7：const d3 = await import("d3")

【参考方案1】：

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

【参考方案2】：

从 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