Latest CRA dev server issue. Browser is appending :port specified in .env file.

[laurencefass]

Describe the bug

This affects the dev server working behind an nginx reverse proxy. My most recent install of create-react-app has broken HMR/fast refresh which has previously been on other test projects I have set up in the same environment accessing my server through an ngninx proxy to re-route client requests to a port defined in my project .env file. nginx.config and env files are supplied below. The browser is repeatedly making requests to the server as wss://my-url:port/ws. I dont think React should be exposing the port to the client and I cant find anyway to override it using .env file settings.

I have reverted to a recent working package.json file and i suspect there is some recent modification that has broken fast refresh/module reload for proxied sites.

I have detailed a package.json for the broken install and a working package.json for side-by-side comparison. To test if this was a problem with the environment or other settings i removed the broken (latest) package.json and replaced with a working version and fast refresh works just fine so it has to be an issue with a change to package.json which i hope can be identified from the package.json comparison.

To reproduce this bug entirely requires a reverse proxied server with nginx configured AND access to code which i cant provide so i have supplied as much info as possible in the hope its possible to recreate.

(Write your answer here.)

Did you try recovering your dependencies?

yes i deleted node_modules and reinstalled and then i resorted to a last know working package.json file which works as expected.

i rebuilt the node_modules using the corrupted (latest) package.json and the problem persist.

Which terms did you search for in User Guide?

I have been searching all over the internet for related problems and none of them resolves the issue other than replacing package.json with a last know working installation and rebuilding node_modules.

(Write your answer here if relevant.)

Environment

sorry this is not useful but this is my systems reply to the npx command

bash-5.1# npx create-react-app --info
Need to install the following packages:
create-react-app
Ok to proceed? (y)

Steps to reproduce

(Write your steps here:)

1. install using package.json.1
2. add .env file to project. see below
3. configure nginx using proxy to redirect to port in env file. see below
4. run npm start and observe a steady stream of websocket errors in the browser (see image 1)
5. delete node_modules and replace package.json.1 with package.json.2
6. run npm start and observe that fast refresh is working correctly in the browser

.env file

PORT = 3300
PUBLIC_URL = '/'

nginx proxy configuration

server {
    listen 80;
    server_name rtkq.syntapse.co.uk;
    location / {
        proxy_pass http://0.0.0.0:3300;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

package.json.1 from most recent installation (results in broken websockets - see screenshot below)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.19",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json.2 (correct operation - see screenshot below)

{
  "name": "typedux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^26.0.24",
    "@types/node": "^16.4.13",
    "@types/react": "^17.0.16",
    "@types/react-dom": "^17.0.9",
    "@types/react-redux": "^7.1.18",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "typescript": "~4.3.5"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Expected behavior

The tool behaves correctly when i build the project with package.json.2 without changing any other part of the project

Actual behavior

The react app generates a steady stream of websocket connection errors when i use package.json.1. See screenshots below. It works if I rebuilt the project using package.json.2

(Write what happened. Please add screenshots!)

screenshot showing websocket errors in browser using package.json.1

note the reference to the port specified in the .env file

screenshot showing correct network operation using package.json.2

note the env file remains the same but the browser is not making explicit reference to server ports.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[monophthongal]

I found a workaround for a similar issue in #11897 (comment), does it resolve the problem for you?