CSS Modules don't load for server components imported by multiple conditional parallel layouts or pages

tinleym commented 1 year ago

Link to the code that reproduces this issue

https://github.com/tinleym/next-no-parallel-shared-server-layout-css

To Reproduce

Start application in development (next dev)

Current vs. Expected behavior

This reproduction demonstrates that CSS Modules are not loaded for a server component shared between two conditional parallel routes.

On opening the page, you'll see no background colors for the components under Server Layout and Server Page because their styles did not load. These are server components shared between conditional route groups @guest and @registered.

Their styles will load if

The @guest parallel route is removed (or underscored)
The route is switched to @guest, using the button at the top

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Apr 24 21:10:53 PDT 2023; root:xnu-8020.240.18.701.5~1/RELEASE_X86_64
Binaries:
  Node: 18.16.0
  npm: 9.5.1
  Yarn: 1.22.11
  pnpm: 8.6.0
Relevant Packages:
  next: 13.5.5-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

These CSS Modules / Parallel Routes issues may or may not be related:

https://github.com/vercel/next.js/issues/53292 -- maybe an inactive conditional route doesn't fully load all its resources when it runs, so a shared CSS Module becomes an empty reference?

https://github.com/vercel/next.js/issues/52245 -- another instance where CSS Modules don't work with parallel routes

GuillaumeHalb commented 10 months ago

Hi there, I created an issue that may also be related: https://github.com/vercel/next.js/issues/59308

kmsomebody commented 10 months ago

I have this issue using Edge runtime with parallel routes. Server or client component doesn't seem to make any difference in this case.

Next.js 14.0.5-canary.5

danielboso commented 8 months ago

I have the same issue. In a page i'm importing a css module that uses a base style. In the parallel route i'm importing the same style to make use of composes attribute. This import inside route parallel is overwriting the page styles.

vercel / next.js