Classic Web Worker in Vite JS Dev Environment
By default, when running in dev mode, Vite loads Web
Worker script in module
mode [1]. While this is compiled away in production
build, it presents a problem if you’re developing with legacy web worker scripts
that must run classic
mode.
To work around this problem, you can import the web worker script as a string and run it using a Blob URL.
import workerString from './worker.js?raw';
const workerBlob = new Blob([workerString], {type: 'text/javascript'});
const workerURL = URL.createObjectURL(workerBlob);
const worker = new Worker(workerURL, {type: 'classic'});
EDIT (2021-07-23):
A previous version of this post used Data URL instead of Blob URL. Today I learned that Blob URLs are better suited for this task than Data URLs. This is because Blob URLs can only be created by the browser, which means that a web worker running from a Blob URL inherits the cross origin isolation settings from the top-level document.
Cross origin isolation is required to use advanced features like
SharedArrayBuffer
.
In comparison, Data URLs are can be generated by anyone, so they are not trusted. From MDN:
Note: Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.
Notes
- [1] See this article for some background on
module
vsclassic
web workers.