Web worker not starting up in production build

[mark-hahn]

I have a vue SPA that works well in debug mode (running vite cmd in project dir). But when I compile in production mode and run it the main app runs but a web worker won't start up. The build ...

> [email protected] build-vite
> vite build --base=/shows/

vite v2.9.18 building for production...
✓ 79 modules transformed.
shows/index.html                  0.53 KiB
shows/assets/index.e9c040bb.css   0.45 KiB / gzip: 0.28 KiB
shows/assets/index.2788dee8.js    149.40 KiB / gzip: 53.76 KiB

I have a debug print before the postMessage call to the worker which shows the call is made. A debug print at the beginning of the worker code doesn't appear. The worker never starts. In the debug run the worker starts and functions.

Creating the worker object gives no error. I assume it is finding the source file. In my experience it throws a Module Not Found if not. I printed out the worker object in the main app after the onError and onMessage calls were attached and it looks normal in both debug and production runs.

BTW, how does the production code find the worker.js file? I don't see that file in the assets.

Any help would be appreciated.

[rschristian]

How are you creating your worker? Have you followed the docs?

[mark-hahn]

Here is code from my main app (simplified) ...

const worker = new Worker('worker.js', {type: 'module'});
console.log('worker:', worker);

worker.onerror = (err) => {
  console.log('Worker err:', err.message);
}

worker.onmessage = (event) => {
  console.log('Worker msg', event.data)
}

console.log('pinging worker');
worker.postMessage({ping:1});

And here is the worker code ...

// worker.js
console.log('worker.js loaded');

self.onmessage = async (event) => {
  console.log('onmessage in worker:', event.data);
  setTimeout(() => {
    console.log('posting pong in worker');
    self.postMessage({pong:1});
  }, 1000);
}

[rschristian]

Please try following the docs I linked & using the URL constructor instead of a string path.

[mark-hahn]

Wow. Thanks Thanks Thanks . The URL fixed it. I did read the docs in detail but it didn't occur to me to try a url. What made you think of that?

Import statements don't need URLs and I assumed a new worker was pretty much an import. Just loading a module to run.

[rschristian]

As the author of this awful regex, experience :)

Nearly all bundlers do this as unfortunately plain strings are not statically analyzable -- take new Worker(stringVar); for instance: how is a bundler going to figure out what that refers to? For inline strings, yes, an argument could be made, but it still can get hairy with string concatenation, interpolation, etc. Easier to just require the URL constructor.

Webpack, for instance, has very similar requirements.

[mark-hahn]

That makes sense, but wouldn't imports have the same problem? A worker is a module, right? It says so right in the constructor.

[rschristian]

Workers can be modules, but they aren't inherently, no. Workers have existed for far longer than ESM.

Not sure what you're referring to with "wouldn't imports have the same problem?" though.