在Next.js中导入ES模块时出现 ERR_REQUIRE_ESM 错误。

Question

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

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

我认为问题在于Webpack（或Babel）将所有的import转换成了require()，但ky是一个纯ES模块。

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

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

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

任何建议？

- Camilo

Answer 1

从 Next.js 12 开始，默认启用 ES 模块的支持，只要 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 */);

- juliomalves

---

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

我也在使用three.js时遇到了类似的问题，而这个解决方案帮助了我。另外一个有用的链接是：https://website-git-switcher-pmndrs.vercel.app/react-three-fiber/getting-started/installation#next-js。 - kimbaudi

在 Next.js 12 中，我仍然遇到了以下构建命令的问题 esbuild index.ts --outdir=dist --sourcemap --bundle --minify --platform=neutral --main-fields=module,main,browser它构建为 ESM，但是在 _app.js 中导入我的模块仍然会抛出此错误。 - Eric Burel

@EricBurel，你的库的package.json文件中有"type": "module"吗？ - juliomalves

好的。我会在这里构建一个重现/演示：https://github.com/VulcanJS/npm-the-right-way，我已经开始记录我们的全栈包构建过程并比较技术。我尝试使用了Next 12，但只有Webpack 4，所以可能与此有关。 - Eric Burel

我现在建议任何人不要使用NextJs，他们引入了巨大的破坏性变化，同时也引入了SWC。 - Albert James Teddy

Answer 2

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

参见：https://github.com/vercel/next.js/pull/27069 更多信息请参阅此问题讨论：https://github.com/vercel/next.js/issues/9607#issuecomment-906155992

- Adam Banko

---

真的很棒！ - Camilo

太棒了，这对我有用，谢谢！ - James Hooper

Answer 3

自从Next.js 12发布（官方公告）以来，对ESM模块的支持已经自动启用。请参见#29878。

自从Next.js 12.1以来，您可以在package.json中添加"type": "module"。请参见#33637。

- Richie Bendall

Answer 4

NextJS 12（也许是13？）和TypeScript：请参考此链接，然后在您的主要package.json文件中的"dev"行中添加--esm，如此用户建议，最后，请更新（或确保）您的tsconfig.server.json（继承自tsconfig.json）将"module": "commonjs"改为"module": "ESNext"。

- petrosmm