在 Next.js ERR_REQUIRE_ESM 中导入 ES 模块

Posted 2023-02-22

【中文标题】在 Next.js ERR_REQUIRE_ESM 中导入 ES 模块

【英文标题】：Import ES module in Next.js ERR_REQUIRE_ESM

【发布时间】：2021-05-04 13:05:27

【问题描述】：

我在 Next.js 项目中尝试使用 ky 时遇到了这个错误：

错误 [ERR_REQUIRE_ESM]：必须使用 import 来加载 ES 模块：/foo/node_modules/ky/index.js

我认为问题在于 Webpack（或 Babel）正在将所有 imports 转换为 require()s 但 ky is a pure ES module。

我在使用它之前通过动态导入ky 使其工作，但它既不优雅也不高效。

const handleFormSubmit = async (event) => 
  const ky = (await import("ky")).default;

  const response = await ky
    .get('http://localhost/api/foo')
    .json();
;

有什么建议吗？

【参考方案1】：

从 Next.js 12 开始，support for ES Modules 现在默认启用，只要 ESM 库的 package.json 中有 "type": "module"。不再需要使用 next-transpile-modules 转译 ESM 库。

---

在 Next.js 12 之前

由于 ky 被导出为 ESM，您可以在 next.config.js 中使用 next-transpile-modules 对其进行转译。

// next.config.js
const withTM = require('next-transpile-modules')(['ky']);

module.exports = withTM(/* your Next.js config */);

【讨论】：

我在尝试使用unist-util-visit@3.1.0 时遇到了同样的问题。这是正确的答案。谢谢！

我也遇到了与three.js类似的问题，这解决了我的问题。对我的问题有帮助的附加链接：website-git-switcher-pmndrs.vercel.app/react-three-fiber/…

在 Next.js 12 中，我仍然使用以下构建命令 esbuild index.ts --outdir=dist --sourcemap --bundle --minify --platform=neutral --main-fields=module,main,browser 解决了这个问题，它构建为 ESM，但随后在 _app.js 中导入我的模块仍然会引发此错误

@EricBurel 你在库的package.json 中有"type": "module" 吗？

是的。我将在这里构建一个重现/演示：github.com/VulcanJS/npm-the-right-way，我已经开始记录我们的全栈包构建过程并比较技术。我已经尝试过 Next 12，但只有 Webpack 4，所以也许这是相关的。

【参考方案2】：

你可以尝试将nextjs升级到v11.1.0，它对ESM有一些支持。

见：https://github.com/vercel/next.js/pull/27069

更多信息来自https://github.com/vercel/next.js/issues/9607#issuecomment-906155992的本期讨论

【讨论】：

这真是太棒了！

太棒了，为我做了，谢谢！

【参考方案3】：

从 Next.js 12 开始，自动启用对 ESM 模块的支持。见#29878。

官方公告：https://nextjs.org/blog/next-12#es-modules-support-and-url-imports