with-zones example causes WebSocket connection fail (HMR) when visiting proxied path

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.17.6

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

N/A

Describe the Bug

Following the instructions in the “with-zones” example and navigating to /blog will case the repeating warning to be displayed:

WebSocket connection to 'ws://localhost:3000/blog/_next/webpack-hmr' failed: WebSocket is closed before the connection is established.

Also because of this HMR is not working when editing files in the blog Next.js app.

Expected Behavior

The HMR client should probably reconnect to the proxied apps HMR server automatically?

To Reproduce

Clone https://github.com/vercel/next.js/tree/canary/examples/with-zones and follow the instructions to start both Next.js apps in dev mode (next dev). Open http://localhost:3000 in a browser and navigate to blog. Wait on the WebSocket connection fail warning to display in the console.

[vvlad3]

The same for me. In Firefox the home app host even completely stuck after some time with following error:

Firefox can’t establish a connection to the server at ws://localhost:3000/blog/_next/webpack-hmr.
The connection to ws://localhost:3000/blog/_next/webpack-hmr was interrupted while the page was loading.

[teovillanueva]

Hey, just created a PR for this issue. The solution seems to work great 😇