[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.

[rstoenescu]

@sapphi-red

Thanks for the ticket!

We do need to connect by ourselves because there is a separate non-Vite managed thread of compilation for BEX mode that needs a way to know when it should "restart" (so we tap into the WS). Again, no current other way to do this (including import.meta.hot, because again, that part is not "compiled" by Vite).
Also noticed that if you set viteConfig.webSocketToken by your own, it always gets overwritten by Vite's internal value. The only way to set webSocketToken is through a Vite plugin with the configResolved() hook.

For all the other ones reading this ticket, fix/adaptation will be available in q/app-vite v2.0.9

[rstoenescu]

@sapphi-red Would be happy to supply more info on why we need that manual connection to Vite's WS, if you want.

[dsl101]

Just adding the exact error message reported in Chrome, to hopefully show this up via search:

This extension reloaded itself too frequently.

[sapphi-red]

I see. Would doing import { createHotContext } from 'http://localhost:${ devServerPort }/@vite/client'; const importMetaHot = createHotContext(import.meta.url) work? (It's not meant to be used currently, but to get some idea whether it can work)

Also noticed that if you set viteConfig.webSocketToken by your own, it always gets overwritten by Vite's internal value.

It's because it's automatically generated by Vite and is not meant to be set by others. I guess it won't break anytime soon, but I'll recommend not setting your own value to it.