Global CSS cannot be imported from within node_modules.

Bug report

I can’t import a css file from a node_modules 3rd party library as described here (https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules).

This is the error I’m getting:

./node_modules/react-datepicker/dist/react-datepicker.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@edooking/ui/src/elements/DatePicker/DatePicker.tsx

It seems this was fixed before here https://github.com/vercel/next.js/issues/12079, but since I’m able to reproduce the issue again on Next.js 10.0.3 I’m re-opening the issue.

To Reproduce

Try to import a CSS from a 3rd party lib.

Expected behavior

To be able to import css

System information

• OS: macOS
• Chrome
• Version of Next.js: 10.0.3
• Version of Node.js: 14.4.0
• Deployment: vercel

Additional context

https://github.com/vercel/next.js/issues/12079

[HitsiLent]

how can you control all 3rd part developer don’t let them import css to their own library, that’s don’t make sense.

[timneutkens]

This is expected, this particular library is incorrectly publishing css imports to npm, looks like it even publishes JSX. Instead it should be exposed separately:

Location: node_modules/@edooking/ui/src/elements/DatePicker/DatePicker.tsx

Importing global css from node_modules is allowed like this in your code:

// Allowed
import 'react-datepicker/dist/react-datepicker.css'

// Not allowed
import DatePicker from '@edooking/ui/src/elements/DatePicker/DatePicker' // this then imports the css

Main reasons behind this are that we don’t compile node_modules further, meaning those files can’t be found during pre-rendering and would crash your application. It’s also not compatible with esmodules so looking to the future it’ll cause issues.

An example of correctly publishing a library like this is https://reach.tech/styling/