next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Styles don't get applied when navigating between pages. Only after refresh

Open AlexLup06 opened this issue 3 years ago • 1 comments

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: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.3.0-next-cf3932be5-20221027
  react-dom: 18.3.0-next-cf3932be5-20221027

What browser are you using? (if relevant)

Chrome 106.0.5249.119

How are you deploying your application? (if relevant)

next dev

Describe the Bug

When I navigate between pages the styles do not get applied. I get a page without any styles. It gets even worse when I have images with the property fill. The take up the whole screen because the styles of the containers don't load. I have to refresh the page and then the styles get applied.

I am using css modules.

Expected Behavior

Apply the styles as they are set when navigating between pages

Link to reproduction

use css modules

To Reproduce

use css modules and then navigate by using Link

AlexLup06 avatar Oct 30 '22 21:10 AlexLup06

I'm experiencing the same issue. For me, it breaks in the development environment as well, once you build it for production it works fine however. Please let me know if you have found a temporary solution.

z89 avatar Nov 04 '22 17:11 z89