Uncaught SyntaxError: Unexpected token 'export'

[meticoeus]

@vite-pwa/sveltekit: 0.2.8 Sveltekit version: 1.20.2

installed by npm: vite-plugin-pwa: 0.16.7 workbox-build: 7.0.0

I am getting a runtime error with a production build with injectManifest strategy when the page attempts to load the serviceworker: Uncaught SyntaxError: Unexpected token 'export'. The plugin is building the SW as a module but workbox-window is using the 'classic' type to register the SW so it fils to load.

I posted https://github.com/vite-pwa/vite-plugin-pwa/issues/597 from a previously working workaround to this issue to force the build to be 'iife' using injectManifest.rollupFormat: 'iife' but that workaround stopped working in the latest version of this plugin and workbox-build.

// vite.config.ts
const config: UserConfig = {
  ...
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      minify: false,
      srcDir: './src',
      mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
      strategies: 'injectManifest',
      filename: 'sw.ts',
      useCredentials: true,
      injectRegister: false,
      manifest: {...},
      injectManifest: {
        globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
      },
      devOptions: {
        enabled: true,
        type: 'module',
        navigateFallback: '/',
      },
    }),
  ],
}

// app.ts
  import { useRegisterSW } from 'virtual:pwa-register/svelte'

  const {} = useRegisterSW({...})

I have worked around this issue for now by copying https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts and https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts and changing the workbox-window registration type to module.

[userquin]

You can fix pwa kit plugin version where the pwa plugin build the sw, but once you update Kit it will not work.

I've seen similar errors due to ancient libraries in the repo, that's why we switch to kit build.

[meticoeus]

So is the recommendation to no longer use this plugin with Sveltekit? I don't understand your response.

I'm working on updating my app to the latest version of sveltekit 1.27.6, and updating other dependencies.

[userquin]

• in SvelteKit there is no way to build the service worker on client build since it is build before the server
• we need to build the service worker in server build using a custom Vite plugin to be called after prerender process (writeBundle Vite Hook) but before closeBundle SvelteKit Vite build plugin hook: we need the html pages to add them to the sw precache
• when building the service worker originally, the output generated by Vite was weird (even changing the format to iife), with exports (kit 1.20 IIRC)
• then we change the plugin to delegate the service worker build to SvelteKit

If SvelteKit is unable to build your service worker, you should check the cause:

• add mode: 'development' to Vite config file and check the service worker output and/or
• you can find serviceWorker in the build output and check if adding manually the type module in the registration works (I think it won't work).