Skip to content
New issue

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

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

Already on GitHub? # to your account

Next.js: Styles not loading after navigation with mixed pages/app #1377

Open
2 tasks done
edenstrom opened this issue Apr 8, 2024 · 3 comments
Open
2 tasks done

Next.js: Styles not loading after navigation with mixed pages/app #1377

edenstrom opened this issue Apr 8, 2024 · 3 comments

Comments

@edenstrom
Copy link

edenstrom commented Apr 8, 2024

Describe the bug

This is a continuation of #1152 with a new reproduction.

Having a project half migrated to the app directory breaks the CSS in the pages in /pages.

The code that fixes the CSS loading in pages only checks that the app directory is created, not that it's in use for that specific page.

How to reproduce

  1. Open reproduction
  2. Navigate from pages: home to pages: other. CSS of pages: other is not loaded
  3. Refresh the page. CSS is now loaded
  4. Navigate to pages: home. CSS of pages: home is not loaded now
  5. Navigating from/to the app directory routes works.

Reproduction

https://stackblitz.com/edit/stackblitz-starters-xzcmes

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 542.77 MB / 32.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.19.1 - ~/Library/Caches/fnm_multishells/34040_1712568811215/bin/node
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/34040_1712568811215/bin/npm
    pnpm: 8.15.6 - ~/Library/Caches/fnm_multishells/34040_1712568811215/bin/pnpm
    bun: 1.0.33 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 17.2.1
  npmPackages:
    @vanilla-extract/css: 1.14.2 => 1.14.2
    @vanilla-extract/dynamic: 2.1.0 => 2.1.0
    @vanilla-extract/next-plugin: 2.4.0 => 2.4.0
    @vanilla-extract/vite-plugin: ^3.9.2 => 3.9.5
    vite: ^5.1.3 => 5.1.4
    webpack: ^5.88.2 => 5.90.0

Used Package Manager

pnpm

Logs

No response

Validations

@huypham50
Copy link

Same issue, confirmed #1152 doesn't fix

"next": "^14.0.4"
"@vanilla-extract/css": "^1.15.1"
"@vanilla-extract/next-plugin": "^2.4.0"

@askoufis askoufis pinned this issue Jun 13, 2024
@askoufis askoufis unpinned this issue Jun 17, 2024
@zecka
Copy link

zecka commented Jul 11, 2024

Note that this issue doesn't appear with css module:
https://stackblitz.com/edit/stackblitz-starters-2ebzry

So it's seems to be related to vanilla extract

@zecka
Copy link

zecka commented Jul 11, 2024

This issue seems related to this one
vercel/next.js#53858

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

3 participants