Fail to load ffmpeg in web assembly in a quasar application [closed]

I built a quasar application and am trying to process a video in ffmpeg in wasm on client side.

Issue

I managed to install the library and set everything up it seems but running ffmpeg.load() I end up with the following error:

ReferenceError: HTMLElement is not defined client:116:1
https://<my_url>:9443/@vite/client:116

Current code loading ffmpeg

It's done dynamically to try to avoid server side rendering:

if (!ffmpeg) {
      const mod = await import('@ffmpeg/ffmpeg');
      const FFmpegCtor = (mod as any).FFmpeg;
      ffmpeg = new FFmpegCtor();
      ffmpeg.on('log', ({ message }: { message: string }) => console.log('[ffmpeg]', message));
}

if (!ffmpegUtils) {
    const utilMod = await import('@ffmpeg/util');
    ffmpegUtils = {
        fetchFile: utilMod.fetchFile,
        toBlobURL: utilMod.toBlobURL,
    };
}

// Load FFmpeg core from local public assets and use a dedicated local worker
const baseURL = '/ffmpeg';

const coreURL = await ffmpegUtils.toBlobURL(
      `${baseURL}/ffmpeg-core.js`,
      'text/javascript'
);
const wasmURL = await ffmpegUtils.toBlobURL(
      `${baseURL}/ffmpeg-core.wasm`,
      'application/wasm'
    );
const workerURL = await ffmpegUtils.toBlobURL(
      `${baseURL}/worker.js`,
      'text/javascript'
    );

console.log('ffmpeg loading');

await ffmpeg.load({ coreURL, wasmURL, workerURL });

What I've already tried:

• I tried without the workerURL with the same issue
• I tried to fetch the wasm and js files from a CDN or locally with the same result
• tsconfig updated with the following:

  "compilerOptions": {
       "baseUrl": ".",
       "lib": ["dom"]
  },
  

• quasar.config.js updated with

  viteConf.optimizeDeps = viteConf.optimizeDeps || {};
  const excluded = new Set([
      ...(viteConf.optimizeDeps.exclude || []),
          '@ffmpeg/ffmpeg',
          '@ffmpeg/util',
          '@ffmpeg/core',
          '@ffmpeg/core-mt',
          '@ffmpeg/core-st',
      ]);
  viteConf.optimizeDeps.exclude = Array.from(excluded);
  

I've been checking with some AI agents, they suggest that it could be because the process is running in a worker which does not have access to DOM elements.

This seems like a valid possibility but I have no idea on how to fix this.