Importing 'virtual:pwa-register' causes bug on build

[snorreks]

Importing virtual:pwa-register in +layout.svelte causes bug during build:

[vite-plugin-pwa:sveltekit:build] The 'swSrc' file can't be read. ENOENT: no such file or directory, open '.svelte-kit/output/client/service-worker.js'
error during build:
Error: The 'swSrc' file can't be read. ENOENT: no such file or directory, open '.svelte-kit/output/client/service-worker.js'
    at injectManifest (node_modules/.pnpm/workbox-build@7.0.0/node_modules/workbox-build/build/inject-manifest.js:71:15)
    at async Object.handler (file://node_modules/.pnpm/@vite-pwa+sveltekit@0.2.5_@sveltejs+kit@1.22.4_vite-plugin-pwa@0.16.4/node_modules/@vite-pwa/sveltekit/dist/index.mjs:189:31)
    at async PluginDriver.hookParallel (file://node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:25338:17)
    at async file://node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:26578:13
    at async catchUnfinishedHookActions (file://node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:25782:16)
    at async rollupInternal (file://node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:26565:5)
    at async build (file://node_modules/.pnpm/vite@4.4.8_@types+node@20.4.6_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-75f53616.js:47956:18)
    at async CAC.<anonymous> (file://node_modules/.pnpm/vite@4.4.8_@types+node@20.4.6_sass@1.64.2/node_modules/vite/dist/node/cli.js:822:9)
 ELIFECYCLE  Command failed with exit code 1.

Inspecting .svelte-kit/output/client/ i can see that there is no service-worker.js or sw.js file when the error is thrown.

It works running locally and if i comment out the import

import { registerSW } from 'virtual:pwa-register';

it works to build the app.

vite.config.ts:

        const globPatterns = [
            'client/**/*.{js,css,ico,png,svg,webp,woff,woff2}',
        ];

        sveltekitPWA({
                base: '/',
                devOptions: {
                    enabled: true,
                    navigateFallback: '/',
                    type: 'module',
                },
                filename: 'sw.ts',
                injectManifest: {
                    globPatterns,
                },
                injectRegister: null,
                kit: {},
                manifest: {
                    background_color: '#ffffff',
                    description: 'MailVideo Admin Dashboard',
                    display: 'standalone',
                    icons: [
                        {
                            sizes: '192x192',
                            src: '/pwa-192x192.png',
                            type: 'image/png',
                        },
                        {
                            sizes: '512x512',
                            src: '/pwa-512x512.png',
                            type: 'image/png',
                        },
                        {
                            purpose: 'any maskable',
                            sizes: '512x512',
                            src: '/pwa-512x512.png',
                            type: 'image/png',
                        },
                    ],
                    name: `MailVideo Admin${mailVideoPrefix}`,
                    scope: '/',
                    short_name: `MailVideo Admin${mailVideoPrefix}`,
                    start_url: '/',
                    theme_color: '#277BFA',
                },
                registerType: 'autoUpdate',
                scope: '/',
                srcDir: './src',
                strategies: 'injectManifest',
                workbox: {
                    globPatterns,
                },
            }),

sw.ts:

/// <reference types="@sveltejs/kit" />
/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />
/// <reference lib="webworker" />

import { type FirebaseOptions, initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { clientsClaim } from 'workbox-core';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';

declare let self: Omit<ServiceWorkerGlobalScope, '__WB_MANIFEST'> & {
    __WB_MANIFEST?: ServiceWorkerGlobalScope['__WB_MANIFEST'];
    skipWaiting(): Promise<void>;
};

// https://vite-pwa-org.netlify.app/guide/inject-manifest.html#service-worker-code
// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST ?? []);

// clean old assets
cleanupOutdatedCaches();

// Auto update: https://vite-pwa-org.netlify.app/guide/inject-manifest.html#auto-update-behavior
void self.skipWaiting();
clientsClaim();

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
...
    kit: {
        serviceWorker: {
            register: false,
        },
        files: {
            serviceWorker: 'src/sw.ts',
        },
        adapter: adapter({
            runtime: 'nodejs18.x',
        }),
    }
};
export default config;  

Versions:

    @vite-pwa/sveltekit: 0.2.5
    @sveltejs/kit: 1.22.4
    vite: 4.4.8

[userquin]

uhmm, can you check if there is a sw.js in the client output folder?

[userquin]

https://vite-pwa-org.netlify.app/frameworks/svelte.html#type-declarations

[snorreks]

There was no sw.js, but now it works. Not sure what changed.