D3 related build issue - use import() instead of require()

[AnnieTaylorCHEN]

Hi, I have other libraries that depend on lower versions of D3 to work, and currently I am having this error in the build:

Error: require() of ES Module /builds/.../node_modules/d3/src/index.js from /builds/.../node_modules/react-gauge-chart/dist/GaugeChart/index.js not supported.
Instead change the require of /builds/.../node_modules/d3/src/index.js in /builds/.../node_modules/react-gauge-chart/dist/GaugeChart/index.js to a dynamic import() which is available in all CommonJS modules.

Which version should I downgrade to avoid this issue? @Martin36 Thanks!

[AnnieTaylorCHEN]

It seems 0.4.0 will not do since it doesn't support React 18.

[ck256-2000]

This link 100% worked for my install - same issue - wouldn't let me leave feedback at Stack Overflow - Good luck! https://stackoverflow.com/questions/75555873/error-require-of-es-module-in-react-gauge-chart-nextjs?newreg=5251096e281a46a294415af2210f9c55

import dynamic from "next/dynamic";
const GaugeChart = dynamic(() => import('react-gauge-chart'), { ssr: false });

[KoehlerAlexander]

For anyone not using next, what worked for me was utilizing React.lazy for importing the GaugeChart:

const GaugeChart = lazy(() => import("react-gauge-chart"))