Next.js中导入ES模块ERR_REQUIRE_ESM

Question

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

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:/foo/node_modules/ky/index.js

我认为问题是Webpack(或Babel)正在将所有imports转换为require()s，但ky是一个纯ES模块。

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

const handleFormSubmit = async (event) => {
const ky = (await import("ky")).default;
const response = await ky
.get('http://localhost/api/foo')
.json();
};

有什么建议吗?

Answer 1

从Next.js 12开始，对ES模块的支持现在默认是启用的，只要ESM库的package.json中有"type": "module"。不再需要使用next-transpile-modules来编译ESM库。

---

Before Next.js 12

因为ky是作为ESM导出的，所以你可以用next-transpile-modules在next.config.js中进行编译。

// next.config.js
const withTM = require('next-transpile-modules')(['ky']);
module.exports = withTM(/* your Next.js config */);

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

Answer 3

从Next.js 12(官方公告)开始，对ESM模块的支持是自动启用的。看到# 29878 .

从Next.js 12.1开始，您可以将"type": "module"添加到package.json中。看到# 33637 .

Answer 4

NextJS 12(也许13?)和TypeScript:请参阅此链接，然后将--esm添加到主package.json中的"dev"行，正如该用户在这里建议的那样，最后，更新(或确保)您的tsconfig.server.json(从tsconfig.json继承)说"module": "ESNext"而不是"module": "commonjs"。