Closed tjabbe closed 7 months ago
Ran into the same bug
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.
Any updates?
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)
Same issue here #49871 Next @13.4.9
I got into the same bug.
@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.
+1
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
Same issue in 14.0.4. I had to move all my css up to the layout to get this to work
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.
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.
Verify canary release
Provide environment information
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
http://localhost:3000
Go to /demo parallel route
link --> headline should still have its css module styling/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