CSS Modules from default.tsx page are not loading on a parallel route hard navigation

[tjabbe]

Verify canary release

• 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 22.5.0: Thu Jun  8 22:22:22 PDT 2023; root:xnu-8796.121.3~7/RELEASE_X86_64
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.18-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/tjabbe/css-modules-parallel-routes-default-page

https://codesandbox.io/p/github/tjabbe/css-modules-parallel-routes-default-page/main

To Reproduce

• Navigate to http://localhost:3000
• Click on Go to /demo parallel route link --> headline should still have its css module styling
• Hard refresh when on the /demo route --> headline lost its styling from the CSS Module class (global styles work fine)

Describe the Bug

Hard navigating to a parallel route prevents CSS Modules styles inside app/default.tsx page from being injected.

As you can see on the screenshot, after a hard navigation to /demo, the class gets applied to the <Headline> component, but no css is loaded (except for the global css loaded in the layout)

I could pin down which PR caused this to stop working, it got released in v13.4.6-canary.5: #51018

Expected Behavior

CSS Modules from app/default.tsx page should load when hard navigating to a parallel route.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-2310

[Terro216]

Ran into the same bug

[jthorupp]

I might have stumbled into the same issue. Styles from CSS Modules are not added to HTML server-side so a flash of unstyled content happens after (what i believe is) rehydration. Not using app folder in my setup but otherwise more or less identical regarding how styles are imported and used in a component.

This only happens in development. When building the app for production the styles are included in the SSR.

[VladMarkus]

Any updates?

[mjad218]

I am facing the same issue!

I have a production app that has this bug:

When you go to https://staging.qawalleb.com every thing works as expected.

After navigating to https://staging.qawalleb.com/new through the menu

The styles are not getting loaded.

Please login first to see the issue as /new is a protected route. (It's a staging env, so no data is kept)

[mjad218]

Same issue here #49871
Next @13.4.9

[takefumi-yoshii]

I got into the same bug.

[tinleym]

@shuding I'm sure you're very busy, but is this issue on anyone's radar? I can confirm that this behavior persists in 13.4.19.

[cberry-humane]

I believe this is related:

The issue I am seeing is client side navigating, using <Link href="/photo/[id]"/> to the route described below does not load css from the include2 parallel route; that css is imported from the component level not the page level as in include1

I tried moving the css from the components to include2 but didn't work.

The only thing that did work is removing the loading.js file from include2 for whatever reason.

app
  (folder)
    (folder)
      photo
        [id]
          @include1
            loading.js
            page.module.css
            page.tsx
          @include2 <-- no css loaded on this parallel route when client side navigation to this page (/photo/[id])
            loading.js
            page.tsx <-- which includes components which include their own module.css
          error.tsx
          page.tsx
          loading.tsx        

[FredTreg]

Same issue in 14.0.4. I had to move all my css up to the layout to get this to work

[luanmm]

I'm working on a project that uses CSS Modules, so all styles are scoped (can't put the styles in the layout or anything like that). I just can't get it working on default.tsx files.

Another thing regarding default.tsx files: why is this required in the first place?

I'm using a structure like below:

route1
     @parallel
         [param]
              page.tsx
         default.tsx
     default.tsx <-- this renders with problems (when the page is accessed directly only)
     layout.tsx
     page.tsx
     styles.module.scss

And my default.tsx files are nothing more than this:

import Page from './page'

export default Page

This is why I need the page rendering exactly as always (accessed directly or not). So it seems a "dummy" or "filler" file to me. Really don't know why the behavior couldn't be the same as page.tsx if there is no default.tsx page (but ok, this seems another topic).

Any thoughts regarding the styling problems? It seems tightly related to this issue.

[github-actions]

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