Shopify / Shopify/hydrogen

Hydrogen dev tunnel serves app but Vite HMR websocket fails to connect (failed to connect to websocket), browser never refreshes

Open
#3,739 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

inactive
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.