HMR does not work in Brave browser

[daniel-kozma]

Describe the bug

Hot Module Reloading does not work in the Brave browser normal tabs. However, it does work in Chrome and in Brave in private tabs. Not really a big issue, just a bit annoying.
The issue is probably caused by trying to construct a websocket on ws://localhost:undefined/ (see logs), which should have probably been localhost:5173.

Reproduction

cleared browser cache on localhost:5173
$pnpx sv create
$pnpm dev --open
open localhost:5173 in private tab too
edit +page.svelte and save
result: page in private tab changes instantly, in the normal tab it doesn't. (it does after refreshing)

Logs

--- VS Code console: ---
2:35:13 PM [vite] hmr update /src/routes/+page.svelte, /src/app.css (x12)

--- Brave normal tab console: ---
client:535 WebSocket connection to 'ws://localhost:5173/' failed: 
setupWebSocket	@	client:535
client:535 Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
    at setupWebSocket (client:535:19)
    at fallback (client:508:16)
    at WebSocket.<anonymous> (client:551:7)
client.js?v=fc83df29:2348
[svelte] binding_property_non_reactive
`bind:this={components[0]}` (.svelte-kit/generated/root.svelte:44:42) is binding to a non-reactive property
warn	@	client.js?v=fc83df29:2348
client.js?v=fc83df29:2348
[svelte] binding_property_non_reactive
`bind:this={components[1]}` (.svelte-kit/generated/root.svelte:45:43) is binding to a non-reactive property
warn	@	client.js?v=fc83df29:2348

--- Brave private tab console: ---
[svelte] binding_property_non_reactive`bind:this={components[0]}` (.svelte-kit/generated/root.svelte:44:42) is binding to a non-reactive property
warn @ client.js?v=fc83df29:2348
client.js?v=fc83df29:2348
[svelte] binding_property_non_reactive`bind:this={components[1]}` (.svelte-kit/generated/root.svelte:45:43) is binding to a non-reactive property
warn @ client.js?v=fc83df29:2348

System Info

--- Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`: ---

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
    Memory: 2.50 GB / 15.74 GB
Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - ~\node_modules\.bin\npm.CMD
    pnpm: 8.3.1 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
    Edge: Chromium (129.0.2792.65)
    Internet Explorer: 11.0.22621.3527
npmPackages:
    svelte: ^5.0.0 => 5.0.0

--- Additional data ---
$vite -v
vite/4.0.3 win32-x64 node-v20.12.2

brave://version
Brave	1.73.104 Chromium: 131.0.6778.204 (Official Build) (64-bit) 
Revision	215b794a7c1f3e28151d0f7712e32c71be48775c
OS	Windows 11 Version 23H2 (Build 22631.4602)
JavaScript	V8 13.1.201.19

Severity

annoyance

[eltigerchino]

I can't reproduce this with a new project and a fresh install of Brave on Windows 11. Do you have any extensions installed that could be causing this? It could by why it works in private mode where most extensions are disabled.

[michaelcozzolino]

it's happening also to me, i think ubuntu automatically updated brave and i'm having the same issue, i also disabled all the extensions, it works only in incognito mode. i'm working on a vue app + vitepress

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 18.85 GB / 30.23 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 9.8.0 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Brave Browser: 132.1.74.48

[ghostdevv]

I can't reproduce this using the same version of brave (132.1.74.48) with either SvelteKit or Vitepress on Arch Linux. I also wonder if there is a browser extension, or maybe vite plugin, that could be causing this

[MathiasWP]

Have you tried turning off Shields for localhost?

[michaelcozzolino]

yes, and same behaviour :(

[daniel-kozma]

I can't reproduce this with a new project and a fresh install of Brave on Windows 11. Do you have any extensions installed that could be causing this? It could by why it works in private mode where most extensions are disabled.

Good idea, I have some extensions installed, and, as I described in the issue, HMR does actually work in private tabs where extensions are disabled.

[elliott-with-the-longest-name-on-github]

This looks like a non-SvelteKit-related issue -- it seems to have something to do with a bug in Brave or an extension mucking things up. I'm going to leave this issue open for a bit so you can all use it to see if you can work out the issue, but I'll be closing it in a few days unless we can find something that actually points back to Kit.