Babel.js 在Next.js中导入ES模块ERR_REQUIRE_ESM

ctzwtxfj 于 2022-12-16 发布在 Babel

关注(0)|答案(3)|浏览(333)

我在Next.js项目中尝试使用ky时遇到了这个错误：
错误[错误请求ESM]：必须使用导入来加载ES模块：/foo/node_modules/ky/index.js
我认为问题在于Webpack（或Babel）正在将所有的import转换为require()，但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();
};

有什么建议吗？

babeljs

来源：https://stackoverflow.com/questions/65974337/import-es-module-in-next-js-err-require-esm

3条答案

按热度按时间

nxowjjhe1#

从Next.js 12开始，只要ESM库在其package.json中包含"type": "module"，就默认启用对ES模块的支持，不再需要使用next-transpile-modules来转换ESM库。

在下一个. 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 */);

赞(0）回复(0）举报 2022-12-16

fumotvh32#

您可以尝试将nextjs升级到v11.1.0，它对ESM有一些支持。
参见：https://github.com/vercel/next.js/pull/27069
有关此问题讨论的详细信息，请访问https://github.com/vercel/next.js/issues/9607#issuecomment-906155992

赞(0）回复(0）举报 2022-12-16

h7appiyu3#

从Next.js 12（官方发布）开始，ESM模块的支持自动启用，参见#29878。
从Next.js 12.1开始，您可以将"type": "module"添加到您的package.json中，请参见#33637。

赞(0）回复(0）举报 2022-12-16