在Next.js中导入ES模块ERR_REQUIRE_ESM

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

错误 [ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块：/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();
};

有什么建议？

回答

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

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