javascript - How do I resolve "[ERR_REQUIRE_ESM]: Must use import to load ES Module" when using D3.js 7.0.0 wi

admin管理员组

文章数量:1202792

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

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

• javascript
• node.js
• d3.js
• next.js
• node-modules

Share Improve this question Follow edited Jul 22, 2021 at 20:21 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Jun 25, 2021 at 5:45 RayRay 24511 gold badge22 silver badges77 bronze badges 6

• 12 Still not sure why D3.js v7 and Next.js v11 won't play nice together. Based on a suggestion from the D3 Slack community I downgraded to D3.js v6.7.0 Now import * as d3 from "d3" works with the useEffect React hook to manipulate the DOM. – Ray Commented Jun 25, 2021 at 21:06
• Downgrading d3 also worked for me! – Tim Lupo Commented Jun 29, 2021 at 20:07
• Happening to me as well. Has there been a bug files with NextJS or D3? – Cyral Commented Jul 17, 2021 at 23:04
• @Ray is there an issue open somewhere? This is quite severe isn't it? – Elias Commented Jul 19, 2021 at 12:15
• 2 note, that dynamic import works for d3@7: const d3 = await import("d3") – oluckyman Commented Aug 31, 2021 at 9:21

 |  Show 1 more comment

4 Answers 4

Sorted by: Reset to default 3

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

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.

For new versions use the 'loose' option

module.exports = {
    // Prefer loading of ES Modules over CommonJS
    experimental: { esmExternals: 'loose' }
}

This was very strange as the error only manifested when clean restarting the project and refreshing browser. While I was developing, everything was fine - probably because of HMR, which loads components dynamically.

Solution in my case was to use dynamic loading, which was also hinted by the error message:

Server Error
Error: require() of ES Module ... from ... not supported.
Instead change the require of index.js in ... to a dynamic import() which is
available in all CommonJS modules.

the solution

// before
import { ResponsiveBar } from '@nivo/bar'

// after
const ResponsiveBar = dynamic(() => import('@nivo/bar').then(m => m.ResponsiveBar), {
  loading: () => <p>Loading...</p>,
  ssr: false,
})

本文标签：