[🐞] Service Worker Bundles Incorrectly

[pustovitDmytro]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

When using the popular 'workbox-background-sync' package by Workbox in combination with the @builder.io/qwik-city/service-worker package, an issue arises where the service worker bundle is not generated correctly.

The error message "Uncaught SyntaxError: Cannot use import statement outside a module" is encountered, and the problem seems to be related to the generated import statement in the service-worker.js file.

service-worker.txt

note the line import{o as I}from"./q-IQTssp_s.js" it should not appear in the service worker bundle.

Reproduction

https://github.com/pustovitDmytro/qwik-sw-bug-reproduce

Steps to reproduce

next service worker fails:

import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';

import { BackgroundSyncPlugin } from 'workbox-background-sync';

declare const self: ServiceWorkerGlobalScope;

addEventListener('install', () => {
    self.skipWaiting();
});

addEventListener('activate', () => {
    self.clients.claim();
});

const plugin = new BackgroundSyncPlugin('sync-queue', {
    maxRetentionTime : 24 * 60
});

console.log('plugin:', plugin);

setupServiceWorker();

in the repository run:

npm ci npm run build cat dist/service-worker.js | grep import

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.07 GB / 15.48 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
  npmPackages:
    @builder.io/qwik: ^1.4.0 => 1.4.0 
    @builder.io/qwik-city: ^1.4.0 => 1.4.0 
    vite: ^5.0 => 5.0.12

Additional Information

after removing the BackgroundSyncPlugin usage issue fixes

using some other 'workbox' packages works ('workbox-strategies', 'workbox-routing', 'workbox-precaching')

[wmertens]

This looks to be an issue with workbox-background-sync. When you inspect the code at https://www.npmjs.com/package/workbox-background-sync?activeTab=code, the main entry of package.json points to index.js and that uses import statements, which shouldn't be there.

Perhaps you can configure vite (rollup) to process that package somehow, it seems likely that vite just uses import because it's in there.

[shairez]

@wmertens does this issue still require a repro? or can it be closed?