Next.js error: Global CSS cannot be imported from within node_modules.

[danforejtek]

I am using Next.js 10.2.0 and when I use SegmentedControlWithoutStyles this error appears

error - ./node_modules/segmented-control/dist/SegmentedControl.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/segmented-control/dist/SegmentedControl.js

[lorensr]

What's the import statement look like? The exported SegmentedControlWithoutStyles file doesn't import .css:

https://github.com/lorensr/segmented-control/blob/master/src/SegmentedControlWithoutStyles.js

Vs SegmentedControl, which does:

https://github.com/lorensr/segmented-control/blob/master/src/SegmentedControl.js

[jaywcjlove]

I created a nextjs package next-remove-imports to solve the problem.

Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

@danforejtek :)

[danforejtek]

Imported like this:

import { SegmentedControlWithoutStyles } from 'segmented-control'

Used same as example in readme:

<SegmentedControlWithoutStyles
  name="oneDisabled"
  options={[
    { label: "One", value: "one", disabled: true },
    { label: "Two", value: "two" },
    { label: "Three", value: "three", default: true },
    { label: "Four", value: "four" }
  ]}
  setValue={newValue => this.doSomething(newValue)}
  style={{ width: 400, color: '#ab47bc' }} // purple400
/>

[lorensr]

Thanks! I fixed this in 0.1.17. Use this import:

import SegmentedControlWithoutStyles from 'segmented-control/SegmentedControlWithoutStyles'