Importing items from quasar module while inside a web worker throws error

[DOOMitru]

What happened?

An error is thrown and web worker does not work when any items are imported from quasar inside the web worker.
For example:

// webworker.js
import { uid } from 'quasar'; // this line causes the error

onmessage = ({ data }) => {
  console.log(data);
  setTimeout(() => {
    postMessage(uid());
  }, 200);
};

What did you expect to happen?

I would expect normal operation and web worker to work as expected.

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-okqx6nox?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Go to reproduction link
2. Simply check the console to see the error thrown

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 20.12.2

Global packages
  NPM - 10.8.2
  yarn - Not installed
  pnpm - Not installed
  bun - 1.1.42
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.15 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - 2.3.0 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.0.7 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.17.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.7.2 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

client.ts:16 [vite] connecting...
17:35:39.367 client.ts:53 [vite] connected.
17:35:48.535 client-entry.js:47 [Quasar] Running SPA.
17:35:49.034 quasar_dist_quasar_client_js.js?v=8352bda6:73 Uncaught ReferenceError: window is not defined
    at quasar_dist_quasar_client_js.js?v=8352bda6:73:50

Additional context

Found this issue while upgrading an app from a webpack build to a vite build. This feature worked fine in the webpack build.

[rstoenescu]

Hi,

You need to load the webworker the vite way, to make it also compile, otherwise you need to convert the import statements from Quasar manually (eg. import uid from 'quasar/src/utils/uid/uid.js')

import MyWorker from './my-worker-file?worker'
const worker = new MyWorker()

[DOOMitru]

I have tried that as well, see: stackblitz link but the same error persists. I've also tried relative path to the worker file but that also doesn't help.

[rstoenescu]

Use the full form: import uid from 'quasar/src/utils/uid/uid.js'. No other way around it because Quasar is not supposed to work in a Web Worker. Please note that this path might change without notice (slim chances to be changed, but you should be aware of it).

[DOOMitru]

Alright, I will keep that in mind going forward. I just want to mention that it did work fine previously with the webpack build.

Thanks for your help though.