WebSocket connection to 'ws://localhost:3000/ws' failed:

Basic React App doesn’t work because the websocket connection appears to be hardcoded to port 3000. Part of this appears to be related to running in a container, but I’ve discovered additional issues even when running local.

Example project here - https://github.com/Fosol/bug-hot-reload

npm: 7.24.0 yarn: 1.22.5 node: v16.10.0 react-scripts: 5.0.0

I have cleared node_modules and performed all the mentioned steps.

Error message here.

WebSocket connection to 'ws://localhost:3000/ws' failed:

If I use port 3000 the error disappears, but nothing works.

Environment

System: OS: Windows 10 10.0.19044 CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor Binaries: Node: 16.10.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 96.0.4664.110 Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.57) Internet Explorer: 11.0.19041.1202 npmPackages: react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. Clone repo - https://github.com/Fosol/bug-hot-reload
2. Run command docker-compose up -d
3. Open browser http://localhost:5000

Expected behavior

Application should work and hot reload should work.

Actual behavior

Application doesn’t work and hot reload doesn’t work. Additionally, it requires rebuilding the image to get any changes. A refresh doesn’t work.

Reproducible demo

Repo here - https://github.com/Fosol/bug-hot-reload

[esetnik]

I was able to work around this issue by manually specifying the port used in my .env file:

WDS_SOCKET_PORT=443

See https://create-react-app.dev/docs/advanced-configuration/#:~:text=for more details.-,WDS_SOCKET_PORT,-✅ Used

[raix]

WDS_SOCKET_PORT=0 Will use window location, still think its a misconfig in CRA but I’ll check history in wds server to look for other clues