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

xmlking commented 1 year ago

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 commented 1 year ago

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

xmlking commented 1 year ago

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

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

xmlking commented 1 year ago

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

Steps to reproduce

gh repo clone xmlking/SPA-aaa-sveltekit-node-vite-pwa-issue
pnpm i
pnpm build
pnpm preview
open http://localhost:4173/ and wait for SW Registered in console
navigate to HELLO tab http://localhost:4173/demo/hello
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 commented 1 year ago

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 commented 1 year ago

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

Edit: Seems to be fixed by setting paths: { relative: false } in svelte.config.js (https://github.com/vite-pwa/sveltekit/issues/24#issuecomment-1731483458).

vite-pwa / vite-plugin-pwa