react-gauge-chart

react-gauge-chart copied to clipboard

When installing and using the library in my next.js project, I got this issue:

./node_modules/react-gauge-chart/dist/GaugeChart/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-gauge-chart/dist/GaugeChart/index.js

Got the same issue

I've got the same issue. I tried npm install @types/react-gauge-chart and it worked!

I've got the same issue. I tried npm install @types/react-gauge-chart and it worked!

Did not work for me

Same - not working for me

Decided to get a temporary fix. I have forked the repo and removed the css import from the module.

Next JS users may install the module using: yarn add git+https://github.com/BossBele/react-gauge-chart.git or npm install git+https://github.com/BossBele/react-gauge-chart.git

In _app.js: import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";

Use as "react-gauge-chart-nextjs-support": import GaugeChart from "react-gauge-chart-nextjs-support";

This is only intended to be a temporary solution for nextJS users. Hopefully the maintainers of this project will fix this issue in the future. Meanwhile, we can't stop coding!

@BossBele thanks

@BossBele thanks

@younes6970 You're welcome!

Hi i tried your solution but is not working @@BossBele.... looks like deleting this line the problem is solved

https://github.com/BossBele/react-gauge-chart/blob/master/dist/GaugeChart/index.js#L14

@joeleduardo It was commented earlier.. Looks like the recent push was not efficient. It is fixed now

Do you know when will be merged your changes? (to the main repo) @BossBele

Not exactly Sir @joeleduardo but It is in the process. However, there is another workaround (using next-css) I am currently verifying. If it works, there won't be a need for the Pull Request to be merged. I will post here my findings.

@joeleduardo there is a workaround using next-css In next.config.js:

const withCSS = require("@zeit/next-css");

module.exports = withCSS();

Then use next dynamic import with no ssr to import GaugeChart:

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

export default function MyComponent(props) {
  return (
                <div>
                  <GaugeChart
                    id="gauge-chart1"
                    arcsLength={[0.2, 0.3, 0.5]}
                    colors={["#EA4228", "#F5CD19", "#5BE12C"]}
                    percent={0.1}
                  />
                </div>
    )
}

@BossBele Your pull request is merged with master now

@BossBele i believe that @zeit/next-css will be deprecated

@joeleduardo Oh, okay

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

next-remove-imports Perfect solution.

@joeleduardo @BossBele