Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS file is not loaded when there are Parallel Routes with [...catchAll] present. #63465

Closed
msundberg opened this issue Mar 19, 2024 · 3 comments · Fixed by #66300
Closed

CSS file is not loaded when there are Parallel Routes with [...catchAll] present. #63465

msundberg opened this issue Mar 19, 2024 · 3 comments · Fixed by #66300
Labels
bug Issue was opened via the bug report template. locked Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.

Comments

@msundberg
Copy link

Link to the code that reproduces this issue

https://github.com/msundberg/css-bug

To Reproduce

  1. Start the application in development mode.
  2. Load the sub-page at http://localhost:3000/sub in your browser (tested with Chrome, both Windows and MacOs).
  3. Click "Home" link.
  4. Root page is loaded but without page.css (no read background).
  5. Reload page and page.css will be loaded (red background),

Current vs. Expected behavior

Current behavior is that the page is loaded without page.css when using "soft navigation". A "hard reload" will load the CSS.
Expected behavior is that the CSS should be loaded both using "soft navigation" and on full reload.

Everything works as expected If the @fizbin/[...catchAll] folder is removed.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #110-Ubuntu SMP Wed Feb 7 13:27:48 UTC 2024
  Available memory (MB): 7938
  Available CPU cores: 4
Binaries:
  Node: 20.10.0
  npm: 10.2.5
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0-canary.30 // Latest available version is detected (14.2.0-canary.30).
  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

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

next dev (local), next build (local)

Additional context

No response

@msundberg msundberg added the bug Issue was opened via the bug report template. label Mar 19, 2024
@msundberg msundberg changed the title CSS file is not loaded when there are Parallel Routes with [...cathAll] present. CSS file is not loaded when there are Parallel Routes with [...catchAll] present. Mar 19, 2024
@G3EORG3E
Copy link

G3EORG3E commented Mar 25, 2024

I am experiencing the same issue when using parallel routes and CSS modules. When navigating on the client side, the CSS sometimes fails to load. This can affect the entire page or just some sublayouts. This issue make this parallel routes feature totally unusable...

Video Preview:
https://github.com/vercel/next.js/assets/4985495/e90db566-175b-4ced-a3bb-02aee9ce2ab7

Parallel routes folder strucutre:
Screenshot 2024-03-25 at 19 36 05

@lionkeng
Copy link

@msundberg
I forked your example.
Would this workaround work for you? See here: msundberg/css-bug@main...lionkeng:css-bug:main

Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 18, 2024
lubieowoce pushed a commit that referenced this issue Aug 29, 2024
This takes the `layerAssets` property from the previous PR and actually
renders it, replacing the previous style handling. This ensures that
when multiple page segments are rendered on screen, all of their
associated CSS files are loaded. The existing `findHeadInCache` method
only ever returns a single head node, which means it’d miss stylesheets.

Fixes #59308
Fixes #63465
lubieowoce pushed a commit that referenced this issue Aug 29, 2024
This takes the `layerAssets` property from the previous PR and actually
renders it, replacing the previous style handling. This ensures that
when multiple page segments are rendered on screen, all of their
associated CSS files are loaded. The existing `findHeadInCache` method
only ever returns a single head node, which means it’d miss stylesheets.

Fixes #59308
Fixes #63465
lubieowoce pushed a commit that referenced this issue Aug 29, 2024
This takes the `layerAssets` property from the previous PR and actually
renders it, replacing the previous style handling. This ensures that
when multiple page segments are rendered on screen, all of their
associated CSS files are loaded. The existing `findHeadInCache` method
only ever returns a single head node, which means it’d miss stylesheets.

Fixes #59308
Fixes #63465
lubieowoce pushed a commit that referenced this issue Aug 30, 2024
This takes the `layerAssets` property from the previous PR and actually
renders it, replacing the previous style handling. This ensures that
when multiple page segments are rendered on screen, all of their
associated CSS files are loaded. The existing `findHeadInCache` method
only ever returns a single head node, which means it’d miss stylesheets.

Fixes #59308
Fixes #63465
lubieowoce pushed a commit that referenced this issue Aug 30, 2024
This takes the `layerAssets` property from the previous PR and actually
renders it, replacing the previous style handling. This ensures that
when multiple page segments are rendered on screen, all of their
associated CSS files are loaded. The existing `findHeadInCache` method
only ever returns a single head node, which means it’d miss stylesheets.

Fixes #59308
Fixes #63465
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants