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

[Fosol]

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

[Fosol]

If you change the default port from 5000 to 3000 the error goes away, but the site doesn't work at all. Even manual refreshing the page doesn't work. You have to rebuild the container for it to get any changes.

[Fosol]

I've reduced the dependencies in a hope it narrows down the issue.

[tdehart]

Running into the same problem I think it might be related to #11762

[Fosol]

I don't have HOST or proxy defined in the example project.

[Fosol]

Right now I can get it working locally (not in a container) if I add the following line of code to the index.tsx file.
However when I attempt to load it in a container I get errors related to the testing libraries not working for some reason.

window.process = {} as any;

[tdehart]

I don't have HOST or proxy defined in the example project.

I was mostly referring to this comment, not assuming that you are using HOST or proxy. There appears to be a bug with how webpackDevSever.js is initializing hosts which could be causing the issue that we're both experiencing.

Are you port mapping to non-standard ports within your container?

[Fosol]

I am using a non-standard port to connect to the container, but inside the container it is still 3000. However, even when I changed the port to 3000 outside the container it doesn't work. It just doesn't throw the websocket connection anymore.

My latest attempts as stated above work locally, but not in the container. However, with my latest changes the container fails for a different reason. It complains of missing testing libraries... Which of course they are not missing and it works fine locally.

TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha`.

[alexilin83]

I'm having the same problem.

[Fosol]

I've updated my repo. I've included the fix for local development. But it doesn't work for container development.