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

Verify canary release

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:

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 23
Comments: 19 (6 by maintainers)

Most upvoted comments

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.

dmaynard24 on Oct 27, 2022

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

controversial on Nov 1, 2022