HMR not working when ssl is activated

Describe the bug

After enabling HTTPS I noticed the log message Firefox can't establish a connection to the server at ws://localhost:3000/sockjs-node. in the browser console. Also i noticed Hot Module Reloading not working.

I assume instead of the WS the WSS protocol should be used when using HTTPS? I am not sure if this is an issue with webpack?

Did you try recovering your dependencies?

Yes npm version: 6.11.3

Which terms did you search for in User Guide?

HMR, HTTPS, SSL, WS, sockjs-node not found

Environment

System: OS: Windows 10 10.0.18362 CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Binaries: Node: 12.4.0 - C:\Progra~1\nodejs\node.EXE Yarn: Not Found npm: 6.11.3 - C:\Progra~1\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 Internet Explorer: 11.0.18362.1 npmPackages: react: ^16.12.0 => 16.12.0 react-dom: ^16.12.0 => 16.12.0 react-scripts: ^3.3.0 => 3.3.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npx create-react-app my-app --template typescript
2. add file .env to project root with content HTTPS=true
3. run the app
4. open browser console and / or edit code files

Expected behavior

HMR would work as before (without HTTPS) and no message about unreachable ws://localhost:3000/sockjs-node endpoints

Actual behavior

In the browser console the message below is displayed and HMR is not working

chrome: WebSocket connection to 'ws://localhost:3000/sockjs-node' failed: Connection closed before receiving a handshake response (webpackHotDevClient.js:60)

firefox: Firefox can't establish a connection to the server at ws://localhost:3000/sockjs-node. (webpackHotDevClient.js:60)

Reproducible demo

same as Steps to reproduce

[saikatguha]

Changing the Line 62 in ./node_modules/react-dev-utils/webpackHotDevClient.js to protocol: 'wss' gets it working again:

var connection = new WebSocket(
  url.format({
    protocol: 'wss',   // <---- Changed from 'ws' to 'wss'
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
    slashes: true,
  })
);

[danielkcz]

I can confirm the same behavior for Chrome 78.

There is also implication you don’t mention here, the browser won’t even refresh on change, so it’s fairly annoying to be refreshing manually. Not sure if Firefox somehow works better on that.