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?

[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.

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