Not found page, component loses styles

[andelkocvjetkovic]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
    Binaries:
      Node: 20.2.0
      npm: 9.8.0
      Yarn: 3.2.3
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.13-canary.3
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

App Router

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

code: https://github.com/andelkocvjetkovic/nextjs-bug
link: https://nextjs-bug-tau.vercel.app/

To Reproduce

run

npm run build
npm  run start

1. Click on button 'Not Found' which leads to not-found page.
2. Click on button 'Home' which leads back to home page

Screen.Recording.2023-07-26.at.14.56.28.mov

Describe the Bug

When navigate back to Home page styles for the button are lost.

Expected Behavior

When navigate back to Home page styles for the button are not lost.

Which browser are you using? (if relevant)

Version 114.0.5735.248 (Official Build) (arm64)

How are you deploying your application? (if relevant)

next start and Varcel

_NEXT-1507

[pedroeckel]

I have the same problem here

[andelkocvjetkovic]

I think the issue is with the style links on the not-found page. Next.js loads the style links within the body, and then on the home page, the body content is replaced with the content of the home page, causing the links to get deleted.

[andelkocvjetkovic]

bug is still present.

@huozhi would you reopen this issues ?

[huozhi]

@andelkocvjetkovic It's fixed in canary 13.4.14-canary.3, can you verify and we should be able to close this issue. And I added some tests in #53906 to ensure it won't be regression again

[andelkocvjetkovic]

@huozhi 13.4.14-canary.3 version is not found.

[huozhi]

@andelkocvjetkovic Can you try the latest canary?

[andelkocvjetkovic]

I tried with 13.4.14-canary.5. The issue is still there.

[huozhi]

Gonna take a deeper look on it 👁️

[MKraust]

We have similar issue. Navigating from 404, we lose some styles (exactly 1 css chunk is missing). But for us it happens only on hard navigation to 404 then soft navigation to other pages.

13.4.12 works fine for us, but newer versions are broken. I've traced this bug to 13.4.14-canary.4 (the first version with this bug for our project). I see that some people are having similar troubles with earlier versions, but I hope that this bit of info could help.

Unfortunately, I've been trying to reproduce it in a fresh project with no success (with the same versions it bugs in our project).

[andelkocvjetkovic]

@huozhi I tried with 13.4.20-canary.2 and the issue is fixed.
https://nextjs-bug-tau.vercel.app

[huozhi]

Looks like it's fixed in 13.4.19 already and the style is hoist properly after navigation. But one thing looks might not be reliable is that the style in the RSC payload showing precedence: "undefined". After discussing with react team we came out with 2 fixes (one on react side and one on nextjs side) so that this can make sure the link tags are marked as hoistable properly for react to handle. Then these similar kinds of cases can be avoid in the future

[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.