Create-react-app: HMR not working when ssl is activated

[sethzollinger]

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(R) Core(TM) 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

[FredyC]

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.

[saikatguha]

Confirming same behavior on Edge

[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,
  })
);

[bitboxer]

This was fixed two weeks ago in this commit #8079. As soon as this is released you won't need to modify the line anymore.

[sethzollinger]

thanks @bitboxer, sounds good. I will close this issue.