search

srujithm / react-advanced-gauge-chart

MIT License
4 stars 4 forks source link

Package not working with Next Js 13 Typescript #3

Open script8888 opened 1 year ago

script8888 commented 1 year ago

Hi Srujithm The package doesn't function well on Next Js 13 TypeScript

After importing, it shows this lint error on the import line Cannot find module 'react-advanced-gauge-chart' or its corresponding type declarations.ts(2307) This is how I imported: import GaugeChart from "react-advanced-gauge-chart";

Ignoring the lint error and proceeding to use the package like this:

 <GaugeChart id="chart1"
                        nrOfLevels={20}
                        percent={0.88}
                        style={{ width: "50%" }}
                      />

It renders the gauge twice as seen in the image below image

After installing the types with yarn add @types/react-gauge-chart it shows this error when you try to render the app require() of ES Module /project/sandbox/node_modules/d3/src/index.js from /project/sandbox/node_modules/react-gauge-chart/dist/GaugeChart/index.js not supported. Instead change the require of /project/sandbox/node_modules/d3/src/index.js in /project/sandbox/node_modules/react-gauge-chart/dist/GaugeChart/index.js to a dynamic import() which is available in all CommonJS modules.

maciej-skurznica commented 1 year ago

Have exactly the same problem. I sorted out the missing types by declare module "react-advanced-gauge-chart"; in index.d.ts file in the root. But still have two gauges.