Hot reload doesn't work in Gitpod after fresh CRA install

Describe the bug

I set up a fresh React project in a Gitpod workspace using create-react-app. After starting the dev server with npm start, hot reload doesn’t work. Changes to App.tsx are only rendered after refreshing the browser.

The following error is displayed in the console:

WebSocket connection to ‘wss://3000-(private GitPod URL redacted).gitpod.io:3000/ws’ failed

Based on this error, I suspect the problem is that when using GitPod you are supposed to access open ports through these special automatically generated subdomains, that proxy connections into the workspace. So for example http://localhost:3000 is accessed through https://3000-workspace-id.gitpod.io:443, where the HTTPS port (443) is proxied to port 3000.

The dev server detects that it’s running on localhost:3000 and tries to connect to wss://3000-workspace-id.gitpod.io:3000 instead, which fails.

Changing the websocket port through an environmental variable just causes the same problem on a different port number.

Here is a link to open an example of this issue in GitPod: https://gitpod.io/#https://github.com/monophthongal/create-react-app-gitpod-bug

Interestingly GitPod’s own create-react-app example works fine, but is using an older version of react-scripts: https://github.com/gitpod-io/create-react-app

Did you try recovering your dependencies?

This happens on a fresh install.

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

GitPod workspace accessed through Chrome 96.

  current version of create-react-app: 5.0.0
  running from /home/gitpod/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.13 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Xeon(R) CPU @ 2.80GHz
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  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. Create a new React project with create-react-app and push to a GitHub repository.
2. Open the GitHub repository in a Gitpod workspace by adding gitpod.io# in front of the GitHub URL.
3. In the GitPod workspace, run npm install and npm start.
4. The app should open in a new tab automatically, but if not, you can do so by opening the Remote Explorer sidebar and clicking “Open Browser” next to port 3000.
5. Make any change to App.tsx.

Expected behavior

Changes should appear immediately without having to refresh the browser (hot reload).

Actual behavior

Changes are not displayed until the browser is refreshed.

Reproducible demo

https://github.com/monophthongal/create-react-app-gitpod-bug

You can open in GitPod at the following URL: https://gitpod.io/#https://github.com/monophthongal/create-react-app-gitpod-bug

[monophthongal]

Workaround: Setting WDS_SOCKET_PORT=0 causes the client to use window.location.port as the websocket port and makes hot reloading work as expected.

Explanation:

CRA is passing port: 3000 to webpack-dev-server like this (excluding unrelated options):

{
  client: {
    webSocketURL: { hostname: undefined, pathname: undefined, port: undefined },
  },
  port: 3000,
}

It looks like at some point webpack-dev-server started defaulting to port for the websocket connection when client.webSocketURL.port is undefined:

https://github.com/webpack/webpack-dev-server/blob/90a96f7bd8e5338f91ef8e4fd6c2ddc01e8174db/lib/Server.js#L547

So with the config passed in by CRA, it tries to connect to the websocket on port 3000, even when the server is being proxied through another port.

In order for it to use window.location.port as the websocket port instead, client.webSocketURL.port needs to be set to ‘0’. This can be accomplished by setting WDS_SOCKET_PORT=0:

{
  client: {
    webSocketURL: { hostname: undefined, pathname: undefined, port: '0' },
  },
  port: 3000,
}

[tirenucci]

Work for me, i have the same problem with Docker.

ADD WDS_SOCKET_PORT=0 to my .env file of my react project.

This adding delete the warning in my console : WebSocket connection to 'ws://localhost:3000/ws' failed

Hot Refresh work again, and i can see again the error on the main screen of my website and not just in the console.