react-scripts 3.3.0 doesn't work in development mode on IE or edge due to WebSocket constructor

[WieserSoftware]

When loaded into the browser, it throws a syntax error to the console on this line:

webpackHotDevClient line 60

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(

I'm guessing this is because the constructor is not supported on edge or IE. Is there a polyfill to work around this?

[justrealmilk]

I have a related issue where it throws an error due to the protocol being used. I run the dev server over https and the socket is ws.

I fixed this by changing it to wss - a temporary fix.

./node_modules/react-dev-utils/webpackHotDevClient.js

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'wss',                     // <-- here
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

[esetnik]

This is caused by the change in #7988. As @justrealmilk mentioned we need to use 'wss' when webpackDevServer is running in https.

[yamilfrich]

@justrealmilk where did change that? Did you eject?

[esetnik]

@yamilfrich I believe you would need to eject or wait for cra team to release an update for this. See #8079.

[justrealmilk]

./node_modules/react-dev-utils/webpackHotDevClient.js

[yamilfrich]

@yamilfrich I believe you would need to eject or wait for cra team to release an update for this. See #8079.

@esetnik isn't needed, at least for your local env you can modify where @justrealmilk mentioned.
Thanks @justrealmilk, you just saved my day ❤️

[ianschmitz]

Can you guys confirm that this was caused by the incorrect WS protocol? I'm hoping the fix we've merged in #8079 will fix this.

[esetnik]

@ianschmitz i don’t think #8079 will fix this issue. We accidentally hijacked this issue when ours was really #8075.

[WieserSoftware]

I think most of the thread is a separate issue. WebSockets constructor isn't supported
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket

[ianschmitz]

I see conflicting information on that: https://msdn.microsoft.com/en-us/ie/hh772739(v=vs.94)

https://caniuse.com/#feat=websockets

[WieserSoftware]

I've finally had time to investigate.
It appears that the url module is only appending // to protocols it deems require it, but it does not list ws or wss in the slashedprotocols map in url.js

So to fix this, that module could be patched, or the url format could be changed to include slashes: true in the object passed.

It turns out that chrome will take a url that looks like ws:localhost:3000/sockjs-node but when the websocket is created, it changes it to ws://localhost:3000/sockjs-node

[Baael]

I've finally had time to investigate.
It appears that the url module is only appending // to protocols it deems require it, but it does not list ws or wss in the slashedprotocols map in url.js

Thank you! Fix to keep monday morning deadline if anyone needs:

./node_modules/react-dev-utils/webpackHotDevClient.js:60 add slashes: true

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
    slashes: true,
  })
);