Loading worker file can't access from origin using laravel, vite and hot module replacment (hmr)

Question

i try to use web workers with vite and hot module replacement (hmr) and get the error that i can't access the JS file from my origin to the vite hmr server. But any access configs seems to be corrently configured.

main.ts:25 Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'http://localhost:5173/resources/js/core/engine/WorkerPoolWorker.js?type=module&worker_file' cannot be accessed from origin 'http://docker.magni-games.com'.

I really doesn't have any clue anymore on how to fix this. I'm greatful for every idea!

main.ts:

const worker = new Worker(new URL("./core/engine/WorkerPoolWorker.js", import.meta.url), { type: 'module' }),

vite.config.ts:

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    server: {
        host: "0.0.0.0",
        hmr: {
            host: "localhost",
        },
    },
    plugins: [
        laravel({
            input: [
                // "resources/sass/app.scss",
                "resources/js/main.ts",
            ],
            refresh: ["lang/**", "routes/**", "resources/views/layouts/app.blade.php"],
        }),
    ],
})

config/cors.php:

<?php

return [
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Answer 1

Good day!

Any success?

I was using workerize with laravel-mix, however after updating to laravel-vite, workers go broken.

I have tried using proxies, but did not succeed.

However, I could find a solution that may fit you, however, unfortunately does not fit me (I need to compile worker in typescript):

async function getWorker(url: Url) {
  let correct_url: string|URL;

  if(isProduction()) {
    correct_url = url;
  } else {
    const req = await fetch(url).then(resp => resp.blob());
    correct_url = URL.createObjectURL(blob);
  }

  return new Worker(correct_url, {
      type: 'module',
  })
}

PS tested only on dev server