'Import ES module in Next.js ERR_REQUIRE_ESM

I came upon this error when trying to use ky in a Next.js project:

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

I think the problem is that Webpack (or Babel) is transforming all imports to require()s but ky is a pure ES module.

I got it working by dynamically importing ky before using it but it's not elegant nor efficient.

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

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

Any suggestions?

Solution 1:^[1]

You can try upgrading nextjs to v11.1.0, it has some support for ESM.

See: https://github.com/vercel/next.js/pull/27069

More info in this issue discussion from https://github.com/vercel/next.js/issues/9607#issuecomment-906155992

Solution 2:^[2]

Since Next.js 12 (official announcement), support for ESM modules is automatically enabled. See #29878.

Since Next.js 12.1, you can add "type": "module" to your package.json. See #33637.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Import ES module in Next.js ERR_REQUIRE_ESM

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]