[BEX] Frequent extension reopen happens when loading the unpacked extension

[sapphi-red]

What happened?

Frequent extension reopen happens when loading the unpacked extension. The extension tab gets opened and closed many times.

What did you expect to happen?

The frequent extension reopen to not happen.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-nrxckgh2?file=README.md

How to reproduce?

1. Download the stackblitz repro
2. Run pnpm i
3. Run pnpm quasar dev -m bex -T chrome
4. Load the unpacked extension.
5. The reopen happens for around 10 or 20 times.

Flavour

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

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 22.13.0

Global packages
  NPM - 10.9.2
  yarn - Not installed
  pnpm - 9.6.0
  bun - 1.1.38
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.8 -- 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 - Not installed
  vite - 6.0.10 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.18.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  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

WebSocket connection to 'ws://localhost:9600/' failed: Error during WebSocket handshake: Unexpected response code: 400

Additional context

This is probably happening due to the change in Vite 6.0.9. Due to a security issue (GHSA-vg6x-rcgg-rjx6), Vite 6.0.9+ now requires a token to connect to the WebSocket endpoint.
Because Quasar BEX mode connects to the WS server on its own, this connection no longer successes.

quasar/app-vite/exports/bex/background.js

Line 48 in bd70884

const socket = new WebSocket(`ws://localhost:${ devServerPort }`, 'vite-hmr')

The way to fix would be to pass config.webSocketToken as a query param (e.g. ?token=${config.webSocketToken}) when connecting to WS server.
https://github.com/vitejs/vite/blob/9654348258eaa0883171533a2b74b4e2825f5fb6/packages/vite/src/node/config.ts#L610-L620
But ideally, it should not connect to the WebSocket server on its own and instead use import.meta.hot.

[evandor]

Not sure if this is feasible for everyone, but, as a workaround, I was able to make my extension work again using

"resolutions": {
  "vite": "6.0.8"
}

in my package.json file. Guess this supports the findings of @sapphi-red.