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

[monophthongal]

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,
}

[monophthongal]

So with that in mind, would it make more sense for CRA to set client.webSocketURL.port to '0' by default instead of undefined?

Connecting to window.location.port is probably the expected behavior for most users, and seems to be how CRA worked before 5.0.

[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.

[elisciandrello]

This just saved me a week.

[eliasyishak]

Saved me so much time, hope this gets resolved in future react versions!

[jholloway7]

The WDS_SOCKET_PORT=0 workaround fixes the port, but it seems the protocol has a related regression. It's being forced to "ws://" whereas it used to figure out it needs to use "wss://" from window.location. If one reverse proxies both the dev server and the web socket behind a web server that does the TLS termination, browsers will complain about mixed content. The workaround there would be to disable the mixed content warning in dev, but that seems less desirable than how it used to work. The use case is integrating with other HTTPS-only web applications in dev behind the same reverse proxy.

[lochanpanchal]

after adding that command to .env new error shown in console.

(index):2762

   crbug/1173575, non-JS module files deprecated.

[jackykwan-eventx]

add WDS_SOCKET_PORT=0 to docker-compose file will also work

[ManiMatter]

Hi,

If I add the WDS_SOCKET_PORT=0 to the .env file (same directory as package.json in my react app), the error disappears:

WebSocket connection to 'ws://192.168.1.6:3000/ws' failed: WebSocketClient | @ | WebSocketClient.js:13 initSocket | @ | socket.js:27 (anonymous) | @ | socket.js:51

But then, my react app comes up with a different error:

Uncaught runtime errors: ERROR Unexpected token 'o', "[object Blob]" is not valid JSON SyntaxError: Unexpected token 'o', "[object Blob]" is not valid JSON at JSON.parse () at http://192.168.1.6:8443/absproxy/3000/static/js/bundle.js:39942:24 at client.onmessage (http://192.168.1.6:8443/absproxy/3000/static/js/bundle.js:37954:9)

Uncaught SyntaxError: Unexpected token 'o', "[object Blob]" is not valid JSON at JSON.parse () at socket.js:60:1 at client.onmessage (WebSocketClient.js:45:1)

I am running the react app using "npm start" from within the dockerized codeserver. lscr.io/linuxserver/code-server:latest and the react app is reachable under http://192.168.1.6:8443/proxy/3000/

Any tipps on the above error?