Repository: create-react-app
Issue: Latest CRA dev server issue. Browser is appending :port specified in .env file.
Labels: needs triage,issue: bug report

### 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.

<!--
  Your module tree might be corrupted, and that might be causing the issues.
  Let's try to recover it. First, delete these files and folders in your project:

    * node_modules
    * package-lock.json
    * yarn.lock

  Then you need to decide which package manager you prefer to use.
  We support both npm (https://npmjs.com) and yarn (https://yarnpkg.com/).
  However, **they can't be used together in one project** so you need to pick one.

  If you decided to use npm, run this in your project directory:

    npm install -g npm@latest
    npm install

  This should fix your project.

  If you decided to use yarn, update it first (https://yarnpkg.com/en/docs/install).
  Then run in your project directory:

    yarn

  This should fix your project.

  Importantly, **if you decided to use yarn, you should never run `npm install` in the project**.
  For example, yarn users should run `yarn add <library>` instead of `npm install <library>`.
  Otherwise your project will break again.

  Have you done all these steps and still see the issue?
  Please paste the output of `npm --version` and/or `yarn --version` to confirm.
-->

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

<!--
  To help identify if a problem is specific to a platform, browser, or module version, information about your environment is required.
  This enables the maintainers quickly reproduce the issue and give feedback.

  Run the following command in your React app's folder in terminal.
  Note: The result is copied to your clipboard directly.

  `npx create-react-app --info`

  Paste the output of the command in the section below.
-->

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

<!--
  How would you describe your issue to someone who doesn’t know you or your project?
  Try to write a sequence of steps that anybody can repeat to see the issue.
-->

(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
<!--
  How did you expect the tool to behave?
  It’s fine if you’re not sure your understanding is correct.
  Just write down what you thought would happen.
-->

The tool behaves correctly when i build the project with package.json.2 without changing any other part of the project

### Actual behavior

<!--
  Did something go wrong?
  Is something broken, or not behaving as you expected?
  Please attach screenshots if possible! They are extremely helpful for diagnosing issues.
-->

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
![image](https://user-images.githubusercontent.com/3512857/148369004-3a8b8d4e-cf91-4b4f-bbbf-4dd5d2f680af.png)
note the reference to the port specified in the .env file

screenshot showing correct network operation using package.json.2
![image](https://user-images.githubusercontent.com/3512857/148369591-20fd7625-1ebb-4878-ad9d-37f49a186d15.png)
note the env file remains the same but the browser is not making explicit reference to server ports.

### Reproducible demo

<!--
  If you can, please share a project that reproduces the issue.
  This is the single most effective way to get an issue fixed soon.

  There are two ways to do it:

    * Create a new app and try to reproduce the issue in it.
      This is useful if you roughly know where the problem is, or can’t share the real code.

    * Or, copy your app and remove things until you’re left with the minimal reproducible demo.
      This is useful for finding the root cause. You may then optionally create a new project.

  This is a good guide to creating bug demos: https://stackoverflow.com/help/mcve
  Once you’re done, push the project to GitHub and paste the link to it below:
-->

(Paste the link to an example project and exact instructions to reproduce the issue.)

<!--
  What happens if you skip this step?

  We will try to help you, but in many cases it is impossible because crucial
  information is missing. In that case we'll tag an issue as having a low priority,
  and eventually close it if there is no clear direction.

  We still appreciate the report though, as eventually somebody else might
  create a reproducible example for it.

  Thanks for helping us help you!
-->