Vite special queries broken when using `strategies: "injectManifest"`

[Cedric]

Description

I am using web workers in my application, for which I use import Worker from './worker?worker'.

The ?worker is part of Vitejs's special queries: https://vitejs.dev/guide/features.html#static-assets

The build breaks when I update the config for VitePWA.

Setup

When I use the injectManifest instead of generateSW the code breaks:

VitePWA({
    ...
    strategies: "injectManifest",
    ...
})

NB : I need the injectManifest strategy as I have custom code in the service worker for the Shared Target API.

Problem

The code build passes but I get these errors at the end and the app does not have access to the workers.

vite v2.8.4 building for production...
✓ 3 modules transformed.
✓ 81 modules transformed.
dist/assets/worker.afc759f2.js   8.48 KiB
dist/index.html                  2.13 KiB
dist/manifest.webmanifest        0.71 KiB
dist/assets/index.f0702519.css   26.88 KiB / gzip: 5.84 KiB
dist/assets/index.18b12ad4.js    53.76 KiB / gzip: 19.24 KiB
dist/assets/vendor.b2b0d9f9.js   219.32 KiB / gzip: 74.88 KiB
error during build:
Error: Could not load /home/cedricpoilly/selfchat2/src/storage/worker.js?worker (imported by src/storage/idb-manager.js): ENOENT: no such file or directory, open '/home/cedricpoilly/selfchat2/src/storage/worker.js?worker'

[Joaquín Sánchez]

@cedpoilly we need to review the plugin to update to latest version of vite, we need to add some more plugins, check #215

So, are you using the worker inside the sw or the build just fails?

I'm testing pwa plugin with latest vite version and I'll try to add some some worker test.

[Joaquín Sánchez]

We cannot use web workers inside service workers: you need to split the logic inside the web workers and use it on service worker as another module via import.

EDIT: any attempt to instantiate the web worker from a service worker will result on error:

We've a web worker example used frm the app on vue-router example.

[Cedric]

Answer

@userquin I am using web workers from the main thread. Not from the Service Worker. The error happens at the build level, not at runtime.

Note: all of Vitejs's special queries are ignored: file?worker, file?url, file?raw.

Current Workaround

I am currently using the import { useWebWorker } from "@vueuse/core" which is far from ideal, it expects the worker file to be in /public.

This folder is not watched, so I had another workaround for that.

Also the import system does not work the same within useWorkWorker, so all the worker-related code is in my worker.js, instead of being structured in different files.

[Joaquín Sánchez]

@cedpoilly the pwa plugin on build does nothing on the codebase, just build the sw, so your problem can be solved including the web worker on the includeAssets entry on the pwa plugin config.

Can you check the generated sw.js file to check if the web worker is on the sw precache manifest beofre adding it to the includeAssets entry?

[Cedric]

@userquin it seems to be working okay after adding the worker to the includeAssets list. I have a minor error in the console though.

Chrome:

Firefox:

[Joaquín Sánchez]

It seems it is included twice, can you share your pwa plugin configuration?

You can check also the vue router example, it is using a simple web worker

[Joaquín Sánchez]

@cedpoilly have you solve your problem?

closing this for now, feel free to open a new issue if the problem persists