Hydrogen dev tunnel serves app but Vite HMR websocket fails to connect (failed to connect to websocket), browser never refreshes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 443
- Avg merge
- 4d 19h
- Merged PRs (30d)
- 24
Description
What is the location of your example repository?
No response
Which package or tool is having this issue?
Hydrogen
What version of that package or tool are you using?
2026.4.1
What version of React Router 7 are you using?
7.12.0
Steps to Reproduce
Running Hydrogen with tunnel for Customer Account auth works for HTTP requests and OAuth redirects, but browser HMR does not work.
Server logs show HMR updates are generated, yet the browser UI never updates.
Environment
Hydrogen: 2026.4.1
Remix Oxygen: 3.0.2
Vite: 6.4.2
Node: 22.x
OS: macOS (Darwin 24.6.0)
Command used
npm run dev
script: shopify hydrogen dev --customer-account-push
Tunnel output
Hydrogen starts successfully and provides a https://.tryhydrogen.dev URL.
Browser console errors
WebSocket connection to 'wss://.tryhydrogen.dev/?token=...' failed
[vite] failed to connect to the websocket.
Your current setup:
(browser) .tryhydrogen.dev/ <--[HTTP]--> localhost:3000/ (server)
(browser) .tryhydrogen.dev:/ <--[WebSocket (failing)]--> localhost:3000/ (server)
So file watcher + rebuild work, but the client websocket transport fails.
Expected Behavior
In tunnel mode, the HMR websocket should connect, and the browser should update when code changes.
Actual Behavior
HMR payloads are generated server-side, but the browser websocket never opens, so no live updates.
Question
- Is this a known regression/limitation with Hydrogen tunnel + Vite HMR in current versions?
- Is there an official recommended HMR config for --customer-account-push (tunnel) to avoid websocket handshake failures?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running npm run dev with the shopify hydrogen dev --customer-account-push script and reproduce the failed wss connection at the tryhydrogen.dev URL. Trace how the tunnel handles Vite HMR WebSocket connections and compare it with the documented setup, if available. Done means the browser WebSocket connects through the tunnel and refreshes after a code change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, react, typescript, vite
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100