-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Global CSS cannot be imported from within node_modules. #19936
Comments
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:
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/ |
@timneutkens |
It's probably a bug in next-transpile-modules which is an unofficial module that changes compilation internals. |
how can you control all 3rd part developer don't let them import css to their own library, that's don't make sense. |
and this just happened to me -_- react-images-upload imports a css file and getting the error |
I am having the same issue — I cannot control how 3rd party library is making their imports. |
Same is the case with patternfly and the patternfly team has mentioned it be a NextJS "drop in support" use-case (More details: patternfly/patternfly#4035). I would humbly suggest the NextJS team to review this and explore the ability to give users an alternate solution, if possible. |
This happens even with important libraries like CKEditor. Check this question here |
This right here is basically a big doorstop for Tailwind 2.2 Issue here: tailwindlabs/tailwindcss#4681 |
Please reconsider your position on this. Next.js is the only major web tool with this restriction. create-react-app, Gatsby, Parcel, vanilla webpack with css-loader, etc. all support importing CSS from anywhere. Restricting this for some philosophical reason only frustrates users of both Next.js and libraries that include CSS. Let me explain why none of the workarounds explained in your docs are very good.
What does "compiled version of their dependency" even mean? CSS doesn't need compiling, it can be loaded directly in the browser. It's up to the library to properly scope their CSS class names somehow, but even if they don't, then it's up to the user building the app to deal with this however they need to. Next.js shouldn't be restricting how libraries are authored and consumed. If this is referring to compiling the CSS into the JavaScript file (i.e. injecting style tags at runtime), then this is not a good solution either as this will result in poor runtime performance for all users, even when they don't use Next.js. Also "reach out to the maintainer" results in tons of support requests to libraries for something that isn't their fault.
Again, CSS doesn't require a "bundler specific integration". It's a web standard and should be supported by any tool. Next.js supports CSS generally, so why not in node_modules?
Requiring users to import the CSS for a library is not a good solution. For example, in a library with many components, you either have to provide a single CSS file with the CSS for the whole library (resulting in bloat), or individual files for each component. But users may easily forget to import the CSS for every component they use, in every file that uses this component (otherwise it might be missing depending on the entry point). Also, each component may depend on more than one CSS file, and these may overlap. The solutions would either be to provide a single combined file per component that users would need to import, or list every single CSS file that they need to import manually in the docs. The first would result in duplicated CSS if multiple components actually share the same CSS source code. The second would cause a breaking change every time a component needs to add (or remove) a CSS dependency because users would need to manually import it.
Global. Always. CSS modules should be pre-compiled before publishing to npm. As you say, dependencies shouldn't require any bundler-specific setup. CSS that's distributed with JS should be loadable in a browser directly.
In the order it was imported, as every other tool works.
Already said CSS modules should be precompiled, but why would this even matter? With CSS modules, the JS doesn't care what the generated names are, it just uses the mapping returned from the module. This is not some complicated problem - it's been solved by other tools for years. Next.js is literally just disabling css-loader from running on node_modules. If that restriction were lifted, everything would work as expected and match every other tool out there. Not doing so is simply making the DX worse for users of Next.js, and causing headaches for library maintainers who users complain to because they get errors when using the library with Next.js. Please fix it. |
@devongovett You are absolutely correct in your points... so my questions for the team are:
Doesn't make sense all those questions you're asking on the docs to us, because all we want is to install our dependencies the way they are. I can't migrate from my React app to NextJS because of this error that doesn't make sense, everything else has a working solution, but not for this one. |
This is a major issue for me currently. I'm unable to control downstream components that we use importing css as it's required for other consumers of those components. A fix or workaround to this problem would be greatly appreciated as I'm now blocked by this issue. |
Thanks for your feedback! I've opened a RFC to change the CSS imports default with some background: #27953 |
I can't use this with Tailwind CSS. Does anyone have a workaround? @elodszopos how did you get this working with the new Tailwind version? As I have the latest version installed, but it's still not working. |
Same problem for me. With my team I've made a pckage and we are going to use it with Next.js. When I've installed our package, Nextjs told me |
I am facing the same issue how do i import the css for particular page only. Let say I have a page page/about.tsx I want to import the css to that page only without exposing it to the global file and there is no way to make it work except with css modules. How do I just import the raw css file on page ? |
There should be a config option to allow or dis-allow this feature. |
This comment has been minimized.
This comment has been minimized.
See this RFC: #27953 (comment) |
Small update: This limitation has been lifted for the new |
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:
It seems this was fixed before here #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
Additional context
#12079
The text was updated successfully, but these errors were encountered: