Import ES module in Next.js ERR_REQUIRE_ESM

Question

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?

juliomalves · Accepted Answer · 2021-10-26 20:39:14Z

38

From Next.js 12, support for ES Modules is now enabled by default, as long as the ESM library has "type": "module" in its package.json. Using next-transpile-modules to transpile ESM libraries is no longer required.

Before Next.js 12

Since ky is exported as ESM you can transpile it with next-transpile-modules in next.config.js.

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

edited Oct 26, 2021 at 20:39

answered Jan 31, 2021 at 10:42

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ezra Over a year ago

I had this same problem trying to use unist-util-visit @3.1.0. This is the right answer. Thanks!

kimbaudi Over a year ago

I also faced a similar issue with three.js and this solved my problem. Additional link that helped w/ my issue: website-git-switcher-pmndrs.vercel.app/react-three-fiber/…

Eric Burel Over a year ago

In Next.js 12 I still hit this issue with the following build command esbuild index.ts --outdir=dist --sourcemap --bundle --minify --platform=neutral --main-fields=module,main,browser It builds as ESM, but then importing my module in _app.js stills throws this error

juliomalves Over a year ago

@EricBurel Do you have "type": "module" in the lib's package.json?

Eric Burel Over a year ago

Yep. I'll build a repro/demo here: github.com/VulcanJS/npm-the-right-way, I've started to document our build process for full stack packages and compare technologies. I've tried with Next 12 but Webpack 4 only so maybe that's related.

|

Adam Banko · Accepted Answer · 2021-08-26 12:07:52Z

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

Richie Bendall · Accepted Answer · 2022-02-18 03:24:25Z

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.

petrosmm · Accepted Answer · 2023-02-04 16:49:44Z

NextJS 12 (and maybe 13?) and TypeScript: please see this link, then add --esm to your "dev" line in your main package.json as this user suggests here, and finally, update (or make sure) your tsconfig.server.json (inherits from tsconfig.json) says "module": "ESNext" instead of "module": "commonjs".

Collectives™ on Stack Overflow

Import ES module in Next.js ERR_REQUIRE_ESM

4 Answers 4

Before Next.js 12

6 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Before Next.js 12

6 Comments

1 Comment

Comments

Comments

Linked

Related