How do I resolve "[ERR_REQUIRE_ESM]: Must use import to load ES Module" when using D3.js 7.0.0 with Next.js 11.0.1?

Question

When trying to use D3 with Next.js, I cannot get past this error when using D3.js v7.0.0 with Next.js v11.0.1.:

[ERR_REQUIRE_ESM]: Must use import to load ES Module

• I tried next-transpile-modules with no luck
• I got D3.js v7.0.0 to work with create-react-app but I need D3 working with Next.js v11.0.1

I installed D3.js using npm i d3. I'm importing with import * as d3 from "d3". Using Node v15.8.0 and React v17.0.2

Answer 1

if you only need "import" from ES6+ features just add 'type': 'module' in your package.json file. Otherwise use babel for enabling all ES6+ features for your app.

Answer 2

Since v12, Next.js has native support for ES modules. So if anyone is facing this issue, just upgrade your Next.js version. D3 and other packages that provide only the ESM entrypoints are now fully supported without any need to transpile them.

Reference: https://nextjs.org/blog/next-12#es-modules-support-and-url-imports

This support was experimental in Next.js v11.1, and can be enabled using the following config:

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true }
}

Reference: https://nextjs.org/blog/next-11-1#es-modules-support