Import error when using next.js

[vedantroy]

When I try to import this library with import ky from 'ky' inside next.js, I get the following error:

Error: Must use import to load ES Module: /home/vedantroy/Desktop/projects/slate/node_modules/ky/index.js
require() of ES modules is not supported.
require() of /home/vedantroy/Desktop/projects/slate/node_modules/ky/index.js from /home/vedantroy/Desktop/projects/slate/.next/server/pages/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /home/vedantroy/Desktop/projects/slate/node_modules/ky/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/vedantroy/Desktop/projects/slate/node_modules/ky/package.json.

[sholladay]

That is a problem with Next.js. Behind the scenes, it is transforming your import statement to use require(), and that's incorrect in this case because Node doesn't allow require()ing an ES module. Ky just happens to be one of the first few popular packages on npm that is distributed in ES module format. Going forward, ES modules are going to become the norm, so this is really something that needs to be fixed in Next.js. I strongly recommend commenting on vercel/next.js#23725 or opening a new issue on the Next.js issue tracker to bring more attention to it.

In the meantime, there are workarounds that exist. You can use next-transpile-modules to transpile Ky, or you can use Ky v0.25 or below, which includes a UMD build that is fully compatible with require() and Next.js. Personally, I would recommend just using Ky v0.25, as it's pretty similar to the latest v0.27, and that's a more natural solution with less complexity.

See also:

• Error [ERR_REQUIRE_ESM]: Must use import to load ES Module ky-universal#28
• next js - error: Cannot use import statement outside a module ky-universal#30
• https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[gaurav5430]

can we not use webpack babel-loader to transpile instead of next-transpile-modules ?