Next v12 upgrade: WebSocket connection to 'wss://localhost:3000/_next/webpack-hmr' failed: for https connections

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

14.17.6

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe the Bug

Post v12.0.3 migration, when I try to run the application locally via https URL, https://dev.abcd.com:443; it throws the error WebSocket connection to 'wss://localhost:3000/_next/webpack-hmr' failed.

http://localhost:3000 was set as assertPrefix.

However, It works fine when I try to use http URL, http://dev.abcd.com:3000

---

After digging a bit I found that, the cause was that the websocket connections for ws://localhost:3000/_next/webpack-hmr worked well, but wss://localhost:443/_next/webpack-hmr failed. I can’t figure out why secure connections are failing

#30491 did not help as I’m neither using nginx, nor a custom express server.

[neeraj3029]

@alexmarioru For me, it was occuring becauase I had set assetPrefix as http://localhost:3000 and deployment was run via https://dev.abcd.com (this will make the protocol secure, wss://). When this is done, the the Websocket URL becomes wss://localhost:3000/_next/webpack-hmr.

Here, the protocol is wss:// which is a secured websocket protocol. Hence, the websocket connection will fail as localhost:3000 works only in unsecured medium.

TL;DR You should either run the local deployment via http://localhost:3000, or set the assetPrefix in next.config.js to https://dev.abcd.com/.

Refer Line 35: https://github.com/genetschneider/next.js-1/blob/e4085069e4a54373d765d1aeca5e71f80020e22b/packages/next/client/dev/error-overlay/websocket.ts#L35

---

@timneutkens , My recommendation would to determine the websocket protocol based on assetPrefix and not on the browser location’s protocol.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.