How can I use this library with NextJS? Always error.

[gergomiklos]

I tried many versions from 0.79 to 0.83, but it always broke the app:

Error: require() of ES Module C:\Users\duegr\github\surveysim\my-app\node_modules\d3-color\src\index.js from C:\Users\duegr\github\surveysim\my-app\node_modules@nivo\colors\dist\nivo-colors.cjs.js not supported.
Instead change the require of index.js in C:\Users\duegr\github\surveysim\my-app\node_modules@nivo\colors\dist\nivo-colors.cjs.js to a dynamic import() which is available in all CommonJS modules.

"next": "13.4.13",
"react": "18.2.0",

[victorgaard]

Hey @gergomiklos had the same issue last week. I found two ways of making it work, you can either:

• Add this to your next config:

transpilePackages: ['@nivo'],
experimental: { esmExternals: 'loose' }

• Or import the component dynamically with next/dynamic, with SSR set to false:

const YourChartComponent = dynamic(
  () => import('YourChartComponentPath'),
  {
    ssr: false
  }
);