How to bundle a worker in library mode?

[andreatiled]

I'm working on an npm package that makes use of a web worker. The worker makes heavy use of imports and dynamic imports with wasms. So far the only option to make everything work is to inline the worker as so:
import MyWorker from './worker/worker_entrypoint?worker&inline'

But this unfortunately generates a huge bundle file (tens of MBs given that also the wasms are inlined) and essentially disables code splitting.
I've tried importing the worker differently such as:

• Importing as ?worker: in the final bundle the worker ends up in /assets/worker-hash.js resulting in 404 when a user uses the library
• Importing as ?worker&url: Same as before, using new URL(worker_as_url, import.meta.url) makes no difference
• Importing as ?url: worker file gets simply encoded as base64 with wrong mime type and dependencies are not resolved
• Instantiate the worker with new Worker(new URL('./worker_entrypoint', import.meta.url), { type: 'module' }): Similar problem as the first point but this time it ends up in /public/assets/worker-hash.js

[avp1598]

Does anyone know the answer to this? I am stuck at figuring out how can i deliver these assets as library to react app developers

[andreatiled]

FYI there's a ticket tracking this issue: #15618

[rhlin]

1. set vite.config base to './'（default to ‘/’）--- the tricky point to build with relative path pattern
2. Importing as ?worker will result in "" + new URL("../assets/worker-hash.js", import.meta.url).href
3. when a user use library, the new URL('../assets/worker-hash.js', import.meta.url).href can be handled well, finally 1) result in something like newURL( new URL('../assets/worker-hash-hashAgain.js', import.meta.url).href, self.location) if the size of worker js file is larger then assetsInlineLimit, and 2) result in newURL('base64-string', self.location) if size is not exceed the limit

[Haschtl]

This doesn't work for me. I've set base to "./", import the worker with ?worker (or ?worker?url, no difference). The bundled code looks a little different:
"" + new URL("assets/myworker.worker-hash.js", import.meta.url).href;

In my other project where I try to use the library with the worker, vite tries to load the worker from /node_modules/.vite/deps/assets/myworker.worker-hash.js (in DEV env). Makes sense, because the library is located in this folder and the URL is relative to this folder.

I tried disabling dep-optimization for the package with the worker in my project
optimizeDeps: { exclude: ["mylibrary-with-worker"] },

Now it resolves to /node_modules/.pnpm/mylibrary-with-worker@x/node_modules/mylibrary-with-worker/assets/myworker.worker-hash.js, (using PNPM) but that's also wrong

Update: After deleting node_modules it seems to work