Next.js issue Global CSS cannot be imported from within node_modules.

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

[BossBele]

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]

@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>
    )
}