with Vite 5 prerendered pages are missing CSS

[xmlking]

Describe the bug

I am using Kit 2 and Vite 5, when I build then preview prerendered pages are missing CSS lines in HTML

when I switch back, to Vite 4.5.0 (still keeping kit 2 changes) there are getting generated. e.g.,

Reproduction

Repo: https://github.com/xmlking/spectacular/tree/main/apps/console-fb

to reproduce:

1. upgrade Vite from 4.5.1 to 5.0.10 in apps/console-fb/package.json
2. pnpm i
3. turbo build --filter=console-fb
4. turbo preview --filter=console-fb
   You will get distorted page due to missing CSS

Logs

N/A

System Info

System:
    OS: macOS 14.1.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 18.02 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.3.0 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.12.1 - /opt/homebrew/bin/pnpm
    bun: 1.0.15 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 17.1.2
  npmPackages:
    @sveltejs/adapter-auto: 3.0.0 => 3.0.0 
    @sveltejs/adapter-node: 2.0.0 => 2.0.0 
    @sveltejs/adapter-vercel: 4.0.2 => 4.0.2 
    @sveltejs/enhanced-img: 0.1.6 => 0.1.6 
    @sveltejs/kit: 2.0.2 => 2.0.2 
    @sveltejs/vite-plugin-svelte: 3.0.1 => 3.0.1 
    svelte: 4.2.8 => 4.2.8 
    vite: 4.5.1 => 4.5.1

Severity

serious, but I can work around it

Additional Information

N/A

[eltigerchino]

Please include a minimal reproduction instead of your entire project.

[xmlking]

I finally found the root cause for this issue. my env:

1. ✅ SvelteKit project with "@sveltejs/kit": "^2.0.0" and some prerendered landing and blog routes
2. ✅ Using @vite-pwa/sveltekit for offline access support with ServiceWorker. and having serviceWorker: { register: false } in svelte.config.js as recommended in their docs
3. 🙅🏽 Added preloadStrategy: 'preload-mjs' in svelte.config.js according to sveltekit docs assuming it give better performance

output: {
	preloadStrategy: 'preload-mjs'
},

after I remove preloadStrategy: 'preload-mjs' setting in svelte.config.js css is generated as expected.

lesson learned: while using prerender = true routes, don't use preloadStrategy: 'preload-mjs'

First I though vite-pwa/sveltekit caused the issue. but it is doing its job well 👍🏽

[eltigerchino]

Thanks for posting your findings. I think it’s worth it to keep this open since it should still prerender correctly even with that preload strategy

[srueg]

Might be related: #11428