Upgrading to 3.3.0 from 3.3.0-next.62 breaks proxied ws connections

Downgrading back to react-scripts@3.2.0 fixes this. It will be fixed soon.

Describe the bug

For the past week I’ve been working with react-scripts@3.3.0-next.62 to use typescript 3.7 features. I just upgraded to 3.3.0 as it was just released. (EDIT: Upgrading to 3.3.0-next.80 causes the same issue as 3.3.0)

My application uses the package.json proxy setting to proxy both http and ws connections. This has been working fine, but upgrading to 3.3.0 causes the socket connections to break. Downgrading to 3.3.0-next.62 causes it to start working again.

Did you try recovering your dependencies?

Yes - I deleted node_modules and package-lock.json and reinstalled. The same result was encountered. I am also on the latest npm version (which still works with 3.3.0-next.62

Which terms did you search for in User Guide?

I searched for websocket proxy issues - the closest I found was issue 6497 but this does not seem to be the same.

Environment

System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 13.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.2 - C:\Program Files\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

^ as a note to the above, I was on node 12 when I first encountered this error, but checked if an upgrade would resolve the problem.

Steps to reproduce

1. Upgrade react-scripts with npm install --save-dev react-scripts@3.3.0
2. Add a proxy value in package.json to match a local service that serves http and ws (eg. "proxy": "http://localhost:8080/")
3. Ensure your web app makes some connection to the proxied websocket
4. Run the app with npm start and view the app

Expected behavior

The proxied websocket connection should behave normally.

Actual behavior

Console logs output the following:

The connection to ws://localhost:3000/subscriptions was interrupted while the page was loading.
Firefox can’t establish a connection to the server at ws://localhost:3000/subscriptions.

in Chrome, a similar log is output:

WebSocket connection to 'ws://localhost:3000/subscriptions' failed: Error during WebSocket handshake: Unexpected response code: 400

[dankolesnikov]

Guys, this just broke our app… Don’t push broken code, please and thank you.

[danielkcz]

@dankolesnikov You have never pushed broken code right? If you are that great, good for you, but others are just humans that do mistakes.

You can be also more proactive with your brilliant mind and fix the problem instead of waiting for others to do it, you know?