SvelteKit: when using with node-adapter, build and preview cause layout shift

[xmlking]

After the build, when we run preview i.e., pnpm preview:
which activates service worker, script URLs change from full URL http://localhost:4173/auth/_app/immutable/assets/_layout-e564fd4d.css" to relative ./_app/immutable/assets/_layout-e564fd4d.css`

This causes the URL fetch to fail as the asset base path is wrong.

To Reproduce : https://github.com/xmlking/svelte-starter-kit

Before SW activation

After SW activation

Error in console

[userquin]

@xmlking what build are you using? All pages generated without any script, and cannot register sw (build + preview)...

[xmlking]

in
https://github.com/xmlking/svelte-starter-kit

pnpm node:build
# this generate ./build
pnpm preview 

[xmlking]

I created this minimal repo to reproduce the issue https://github.com/xmlking/SPA-aaa-sveltekit-node-vite-pwa-issue

Steps to reproduce

1. gh repo clone xmlking/SPA-aaa-sveltekit-node-vite-pwa-issue
2. pnpm i
3. pnpm build
4. pnpm preview
5. open http://localhost:4173/ and wait for SW Registered in console
6. navigate to HELLO tab http://localhost:4173/demo/hello
7. when you reload this page (browser refresh) you will see layout shifted page and errors in console log

Server side errors

Error: Not found: /demo/_app/immutable/assets/_layout-8454f68e.css
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2712:18)
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2599:34)
    at options.hooks.handle (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2829:59)
    at respond (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2597:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Not found: /demo/_app/immutable/assets/ReloadPrompt-8b6f04a5.css
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2712:18)
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2599:34)
    at options.hooks.handle (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2829:59)
    at respond (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2597:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Not found: /demo/_app/immutable/assets/_page-265a38f0.css
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2712:18)
    at resolve (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2599:34)
    at options.hooks.handle (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2829:59)
    at respond (file:///Users/schintha/Developer/Work/SPA/aaa/sveltekit-node-vite-pwa-issue/.svelte-kit/output/server/index.js:2597:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Now disable SvelteKitPWA adding disable: true

SvelteKitPWA({
	disable: true,
        ...
})

repeat the above steps, when you hard reload http://localhost:4173/demo/hello, you won't see the layout shift problem.

[xmlking]

for routers in root http://localhost:4173/ there is no problem as assets are relative to root.
but this is the only problem for sub routers e.g., http://localhost:4173/demo/hello as there are no assets relative to demo path

[austerj]

Hi @xmlking, did you end up finding a solution for this? I'm having the same issue using the SvelteKit plugin. Also mentioned here: vite-pwa/sveltekit#24.

Edit: Seems to be fixed by setting paths: { relative: false } in svelte.config.js (vite-pwa/sveltekit#24 (comment)).