Hot reloading breaks when proxy is enabled

[ThiefMaster]

Describe the bug

The WebSocket request for hot reloading is forwarded to the proxy target.
For example, when using "proxy": "http://localhost:5000" in my package.json, I end up getting a request for /sockjs-node/302/ic0mb0qo/websocket in the server running on 5000. And of course hot reloading doesn't work anymore.

Did you try recovering your dependencies?

Yes. npm version 6.10.0.

Which terms did you search for in User Guide?

n/a; not mentioned anywhere in the proxy docs

Environment

  System:
    OS: Linux 4.14 Gentoo/Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 9.11.2 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.10.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^16.8.6 => 16.8.6
    react-dom: ^16.8.6 => 16.8.6
    react-scripts: 3.0.1 => 3.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app cra-bug
2. Add "proxy": "http://127.0.0.1:5000" to package.json
3. Run a web server on port 5000 (ideally one that logs requests)
4. npm start

Expected behavior

Hot reloading working, this particular websocket request not being forwarded to the proxy target.

Actual behavior

Hot reloading is not working, there's a warning in the console about it, and the web server from step (3) will show a request for /sockjs-node/.../.../websocket

Reproducible demo

https://github.com/ThiefMaster/cra-bug

---

Not sure if this is bug in CRA/react-scripts or in the webpack dev server...

[dmile]

Which browser do you use?
Looks like a duplicate of #6720

[ThiefMaster]

Firefox, but I don't see how this is browser-related since the decision whether to proxy or not is something on the server. The request connection gets forwarded to the proxy target instead of being handled by the CRA/webpack dev server.

[ThiefMaster]

OK, after reading all the comments on that other issue I agree that it's probably the same.