javascript - How to create Web Worker in a SvelteKit app on Vercel? - Stack Overflow

admin管理员组

文章数量:1292872

I've created a SvelteKit webapp that works great on my desktop in my local environment. I launch the browser/webserver with:

npm run dev -- --open

Now I've just deployed to Vercel. Everything works great, except the JavaScript mand I use to launch my Web Worker gives a 404 error in the browser console:

new Worker('./lib/game/runs_thread.js')

Sure enough, if I copy /lib/game/runs_thread.js into my browser after my domain name, I get a 404 error. Where is my runs_thread.js and how can I launch my Worker?

I've created a SvelteKit webapp that works great on my desktop in my local environment. I launch the browser/webserver with:

npm run dev -- --open

Now I've just deployed to Vercel. Everything works great, except the JavaScript mand I use to launch my Web Worker gives a 404 error in the browser console:

new Worker('./lib/game/runs_thread.js')

Sure enough, if I copy /lib/game/runs_thread.js into my browser after my domain name, I get a 404 error. Where is my runs_thread.js and how can I launch my Worker?

• javascript
• web-worker
• svelte
• vercel
• sveltekit

Share Improve this question Follow asked Jun 16, 2021 at 0:55 at.at. 52.6k105105 gold badges303303 silver badges470470 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I think what you need to do is replace

new Worker('./lib/game/runs_thread.js')

with

import workerURL from './lib/game/runs_thread.js?url';
//...
new Worker(workerURL)

Alternatively,

import MyWorker from "./path/to/worker.js?worker"
new MyWorker()

From vite's documentation

// someComponent.svelte or +page.svelte or +layout.svelte
onMount(async () => { // must be "async" because of the dynamic import. see "await import" below
    if (window.Worker) { // "window" is available because we're in "onMount"
      // Vite dyn import: https://vitejs.dev/guide/assets.html#importing-script-as-a-worker
      const MyWorker = await import('$lib/workers/my_worker.js?worker');
      const myWorker = new MyWorker.default(); 
      myWorker.postMessage('do-this');
      myWorker.onmessage = function (e) {
        console.log(e.data);
      };
    }
})

// $lib/workers/my_worker.js
self.onmessage = (e) => {
    if (e.data === 'do-this') {
        doThis();
        postMessage('job-done');
    }
};

function doThis(){
  // doing something
}

本文标签： javascriptHow to create Web Worker in a SvelteKit app on VercelStack Overflow