Problem with next.js

[ScarpelliniStefano96]

Hi, i try to use your graphs in my project but i have a issue. I use npm install react-gauge-component --save for install the package, i import that in a page but when i do the npm run dev, it run into a error:

• error ./node_modules/react-gauge-component/dist/lib/GaugeComponent/hooks/arc.js:31:11 Module not found: ESM packages (d3) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./node_modules/react-gauge-component/dist/lib/GaugeComponent/index.js ./node_modules/react-gauge-component/dist/lib/index.js ./src/app/page.js

what can i do?

[antoniolago]

Hello, I'm not familiar with next.js, later tonight or tomorrow I'll try running a next.js project and integrate the gauge with it to reproduce the issue, sorry not having much free time lately :(

If you feel like it you can make some tests and maybe send a PR.

[antoniolago]

Hey, I unsuccesfully tried to make the module compatible with nextjs out of the box

BUT you can use dynamic importing:

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

const MyComponent = () => {
  return (<GaugeComponent />);
};

I'll be adding this to the documentation.

[ScarpelliniStefano96]

Thanks

Stefano

Il sab 5 ago 2023, 22:14 antoniolago @.***> ha scritto:

Closed #19 https://github.com/antoniolago/react-gauge-component/issues/19 as completed.

— Reply to this email directly, view it on GitHub https://github.com/antoniolago/react-gauge-component/issues/19#event-10016020318, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3E6YBJ4YVLEVBFC2UTZLPTXT2SRVANCNFSM6AAAAAA3BSYFAU . You are receiving this because you authored the thread.Message ID: @.*** .com>