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

[gcaggia]

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]

Got the same issue

[sunshine9249]

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

[BossBele]

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

Did not work for me

[shamoons]

Same - not working for me

[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!

[younes6970]

@BossBele thanks

[BossBele]

@BossBele thanks

@younes6970 You're welcome!

[joeleduardo]

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

[BossBele]

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

[joeleduardo]

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

[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.

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

[Martin36]

@BossBele Your pull request is merged with master now

[joeleduardo]

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

[BossBele]

@joeleduardo Oh, okay

[jaywcjlove]

uiwjs/react-md-editor#52 (comment)

next-remove-imports Perfect solution.

@joeleduardo @BossBele