I had an issue randomly come up where, in a VueJS application I was building with the vite build system, I have many web workers loaded as ES modules.
One day I spun up the local host dev server and the app stopped worked, with: “Cannot use import statement outside a module”
I had made sure all the “settings” were set as per various other stack overflow questions and various other suggestions
import workerUrl from '@/libs/my.worker?worker&url';
const worker = new Worker(workerUrl, {type: 'module'})
I had the following set in my vite.config.js file:
worker: {
format: 'es',
}
I followed every single recommendation and it still wasn’t working, and yet I couldn’t figure out why. This only happened in localhost, and when hosted on a static website, the issue did not occur.
I know this is stupid, but I traced the issue down to this Chrome extension I had installed years ago: https://chromewebstore.google.com/detail/manage-web-workers/mcojhlgdkpgablplpcfgledhplllmnih?pli=1
I guess a recent Chrome update prompted my browser to re-install that extension after years of having it disabled, and this suddenly broke my app overnight.
You can easily just run the app in incognito to see if that is messing with the web-worker loading. This seemed like such a stupid reason, but in retrospect it makes sense why, despite me doing “all the right things”, my issue persisted.
In the offchance someone runs into the same exact issue I had, I figured I’d just document that it could be an issue with installed extensions.