0

Good day!

I have recently switched from laravel-max (webpack) to laravel-vite (vite).

Web page (index.php) is served from php server and vite hmr separately for js dev server.

I wanted to convert workers by workerize-loader to web worker modules in vite. (I would like to use Typescript and imports.)

So, if you load worker as

const worker = new Worker(new URL('./worker.ts', import.meta.url), {type: 'module'})

it works fine after building. However, the problem is, that site is served (in dev) from https://localhost:8000 and new Worker(new URL('./worker.ts', import.meta.url), {type: 'module'}) resolves to 'https://localhost:5173/@fs/path-to/worker.ts?type=module&worker_file and Workers can be initiated only from same origin.

I suspect I have three solutions:

  1. Proxying in vite dev server: I could not configure out that

  2. Importing worker through fetch/axios to Blob and create a worker from the Blob. However, then the worker cannot have import statements and Typescript.

  3. (Appended) Remove vite hmr and use vite as webpack - each change compiles down to code that is requested by browser (dont know how to do with laravel-vite)

Thanks in advance!

P.S. I am using Vue 3 composition-api, if it helps

ayb jax
  • 121
  • 1
  • 7
  • 1
    @flydev, it is not a service worker – ayb jax Dec 12 '22 at 12:41
  • I will make you an example, but my best suggestion to avoid those sort of issue, is to use a **custom dns** for **local development**, eg, running your project under `https://mysite.localdev` where `.localdev` is the tld (it's just an example). Cross origin will not be an issue anymore, and your development will be easier. – flydev Dec 12 '22 at 14:20

0 Answers0