[appDir] Next.js can't pickup css imports from client components

[SukkaW]

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:

[jmikrut]

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.

[alexis78i]

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.

[jmikrut]

@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

[alexis78i]

@jmikrut here https://beta.nextjs.org/docs/rendering/server-and-client-components#thread-id=Y93th

[jmikrut]

@alexis78i I don't see a single mention of CSS or styles on that page but I am likely blind and / or stupid

[alexis78i]

@jmikrut I noticed that the thread was resolved

[kochie]

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?

[OlegMikhailov23]

Have the same problem. Next does not see my imported css modules.

[arzafran]

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

[dmaynard24]

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.

[tonypeng]

+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)

[Nfinished]

I'm also experiencing exactly what @dmaynard24 and @tonypeng have described

[OlegMikhailov23]

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?

[mjmcgrath2010]

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

[controversial]

Adding 'use client' still breaks styling for me on Next.js 13.0.1

[shuding]

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!

[controversial]

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! ❤️

[outdoteth]

@controversial what was the mistake? Hi did you fix it?

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.