[injectManifest] Error during build: The 'swSrc' file can't be read. ENOENT: no such file or directory

[bravier]

Continuation of #100.

It looks like installing workbox-window is needed when using injectManifest strategy otherwise the build command crashes with:

error during build:
[vite-plugin-pwa:sveltekit:build] The 'swSrc' file can't be read. ENOENT: no such file or directory, open '/tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/.svelte-kit/output/client/service-worker.js'
    at injectManifest (/tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected]/node_modules/workbox-build/build/inject-manifest.js:70:15)
    at async Object.handler (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_svelt_393a97f75c9db1dc5edf7c99a890c00e/node_modules/@vite-pwa/sveltekit/dist/index.mjs:266:33)
    at async PluginDriver.hookParallel (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:21813:17)
    at async file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:22796:13
    at async catchUnfinishedHookActions (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:22243:16)
    at async rollupInternal (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:22772:5)
    at async buildEnvironment (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:51463:14)
    at async Object.defaultBuildApp [as buildApp] (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:51926:5)
    at async CAC.<anonymous> (file:///tmp/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/cli.js:860:7)

Minimal reproduction: https://github.com/bravier/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory

1. git clone https://github.com/bravier/vite-pwa-inject-manifest-swSrc-no-such-file-or-directory
2. pnpm install
3. pnpm build → The 'swSrc' file can't be read. ENOENT: no such file or directory, open '.svelte-kit/output/client/service-worker.js'
4. pnpm install -D workbox-window
5. pnpm build → no errors, everything is fine

Or when using pnpm create @vite-pwa/pwa:

pnpm create @vite-pwa/pwa
✔ Project name: … vite-project
✔ Select a framework: › Svelte
✔ Select a variant: › SvelteKit ↗
✔ PWA Name: … vite-project
✔ PWA Short Name: … vite-project
✔ PWA Description: … 
✔ Theme color: … #ffffff
✔ Select a strategy: › injectManifest
✔ Select a behavior: › Prompt for update
✔ Enable periodic SW updates? … no / yes
✔ Show offline ready prompt? … no / yes
✔ Generate PWA Assets Icons on the fly? … no / yes
┌  Welcome to the Svelte CLI! (v0.6.26)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  pnpm
│
◆  Successfully installed dependencies

cd vite-project

pnpm install → workbox-window is explicitly installed here so the build works fine

pnpm build → ok

pnpm remove workbox-window

pnpm build → error

[userquin]

ok, maybe since workbox-window is missing and we're using svelte pwa virtual module, Vite/Kit unable to resolve the module since the virtual cannot load workbox-window and so the virtual module at pwa plugin not being resolved and kit will not generate it since it is not referenced/installed => I'll check some pwa and kit plugins' internals in this scenario (since pwa plugin will not build the sw itself, kit will build it)

EDIT: running dev server in your reproduction will fail to load the layout since workbox-window not installed => if you disable the devOptions in the pwa dev will work since the virtual in that case won't use workbox-window: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/dev/register.ts

[bravier]

I'll check some pwa and kit plugins' internals in this scenario (since pwa plugin will not build the sw itself, kit will build it)

Thanks!

EDIT: running dev server in your reproduction will fail to load the layout since workbox-window not installed => if you disable the devOptions in the pwa dev will work since the virtual in that case won't use workbox-window

Yes I noticed too that pnpm dev was not working and should have set {devOptions: {enabled: false}} in my repro, I've updated it. But the main issue here is with pnpm build not pnpm dev.

[smart]

I think I'm facing this too. It seems service-worker.js is hardcoded here? If we have sveltekit not generate one and use our own filename, for source, will this rename fail? if (swName !== 'service-worker.js') { await rename( join(clientOutputDir, 'service-worker.js').replace('\/g', '/'), join(clientOutputDir, swName).replace('\/g', '/'), ) }

[smart]

I tried so many different config options. Things were working in local build and vercel deploys. But would fail in CI. could be that the move function is running before the file is available?