[Solved]-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?-d3.js

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.

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