next.js
next.js copied to clipboard
vercel
[appDir] Next.js can't pickup css imports from client components
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: Ubuntu 20.04.0 LTS Wed Oct 26 2022 00:58:23 GMT+0800 (China Standard Time)
Binaries:
Node: 16.14.2
npm: 7.17.0
Yarn: 1.22.19
pnpm: 7.13.6
Relevant packages:
next: 12.3.2-canary.43
eslint-config-next: N/A
react: 18.3.0-next-fecc288b7-20221025
react-dom: 18.3.0-next-fecc288b7-20221025
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
When using experimental.appDir, Next.js can not pick the CSS import from React Client Components located under the app dir. Both CSS Modules and Global Stylesheets can't work.
cc @shuding
Expected Behavior
The imported CSS should be collected, processed, and then bundled by Next.js.
Link to reproduction
https://stackblitz.com/edit/nextjs-4ur55n
To Reproduce
Open the reproduction from stackblitz attached above:
Having the same issue with Payload CMS' new site. If we remove the use client directive, the CSS is loaded properly. We tried importing components in both the /app directory as well as outside of it, and neither location pulled in the CSS module styles accordingly.
I got the answer in the nextjs 13 documentation page that styles need to be imported directly into Layout for this to work. But all the charm of using CSS modules and many imports is lost.
@alexis78i can you link me to where you saw that?
I see here that they say CSS modules can be imported into any file within /app:
https://beta.nextjs.org/docs/styling/css-modules#usage
@jmikrut here https://beta.nextjs.org/docs/rendering/server-and-client-components#thread-id=Y93th
@alexis78i I don't see a single mention of CSS or styles on that page but I am likely blind and / or stupid
It seems to be that the css is not being bundled and sent to the client, possibly some sort of mismatch between server and client components?
Still happening when using:
Binaries:
Node: 17.0.1
npm: 8.1.0
pnpm: 7.14.0
Relevant packages:
next: 13.0.1-canary.0
eslint-config-next 13.0.1-canary.0
react: 18.2.0
react-dom: 18.2.0
I'm running into the same problem. CSS Modules styles aren't working. Interestingly enough, the generated CSS classnames are still being appended to elements.
+1, having this issue as well
translated CSS classnames are present in class attributes but the compiled CSS itself is not injected anywhere
css modules don't work with or without 'use client'; and regular CSS imports with classes (e.g. import './style.css';) don't work when using 'use client'; (but work on server side components)
I'm also experiencing exactly what @dmaynard24 and @tonypeng have described
In my case css modules don't work if we have a client component, but,if you switch to server component, it works fine. Is it a right behavior?
Tagging on (might be separate issue, can file)...
When using styled components, it appeared that their CSS was getting applied (somewhat inconsistently, oftentimes it took a hard page load to see changes). However, when adding a loading.tsx file, the styles were certainly not getting applied in many areas.
On my phone rn but can follow up with an example
Adding
'use client'still breaks styling for me on Next.js 13.0.1
@controversial Would you mind providing a detailed reproduction so that I can take a look? Thanks!
Never mind, it was my mistake @shuding 😅 Of course, I realized as soon as I went to start creating a reproduction. Thanks for being on top of it! ❤️
