What's the best way to add workers in SvelteKit?

[ioucyf]

I tried adding const worker = new Worker('$lib/myWorker') to hooks.client.ts and it throws the error 404 (Not Found).

I also tried the following:

// src/routes/+layout.svelte
<script lang=ts>
onMount(() => {
		if (browser) {
			const worker = new Worker('../lib/client/workers/indexedDB');
		}
	});
</script>

and that also fails.

I was able to make it work only by adding it to the static folder like so: static/workers/worker.js and only then it'll work either from hooks.client.ts or src/routes/+layout.svelte.

Any ideas if there's a better way to do it with TypeScript if possible?

[ioucyf]

There's a feature in Vite.js that allows you to import workers and it'll instantiate them for you. For anyone who doesn't know, this is how:

// hooks.client.ts
import MyWorker from '$lib/MyWorker?worker';
const myWorker = new MyWorker;
myWorker.postMessage('hello world to worker!')

Thank you.

[azern32]

I was trying this where the from part was '$lib/Worker/sheets?worker',
but it give me
TypeError: BuildMessage: ModuleNotFound resolving "/src/lib/Worker/sheetjs.js?worker_file&type=module" (entry point) error

My folder structure was

src
| lib
   | Worker
      | sheetjs.js

the full code was

<script>
	import Budak from '$lib/Worker/sheetjs?worker';

	let test = new Budak();
</script>

<button
	class="btn btn-accent"
	onclick={() => {
		test.postMessage('only test');
	}}
>
	testing bro
</button>