javascript reactjs asp.net-core webpack create-react-app

ASP.NET 6 with ReactJS - browser not refreshing on hot reload with react-scripts 5.0.0

I have an ASP.NET 6 app with ReactJS, created some time ago using Visual Studio 2022 ASP.NET Core with React.js template.

The ClientApp is a React app created with create-react-app.

I've updated my react-scripts package to version 5.0.0 (from 4.0.3). One of the significant changes, AFAIK, is that it uses webpack 5 now.

Since this update, when I launch the ASP.NET app (using the standard run configuration which launches both the ASP.NET app and React app), the hot reload is not refreshing the browser automatically as soon as I make changes in any React files. If I hit the browser's refresh button or F5 manually, I can see the changes. The only change is that the browser doesn't refresh itself after a change in React file has been made.

I'm on Windows 11.

That's my current package.json:

{
  "name": "my.app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.9",
    "@types/react": "^17.0.35",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-bootstrap": "^0.24.5",
    "bootstrap": "^5.1.3",
    "jquery": "^3.5.1",
    "merge": "^1.2.1",
    "node-sass-chokidar": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "oidc-client": "^1.9.0",
    "react": "^16.0.0",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^16.0.0",
    "react-icons": "^4.3.1",
    "react-pro-sidebar": "^0.7.1",
    "react-responsive": "^9.0.0-beta.5",
    "react-router": "^6.0.2",
    "react-router-bootstrap": "^0.26.0",
    "react-router-dom": "^6.0.2",
    "react-scripts": "^5.0.0",
    "rimraf": "^2.6.2"
  },
  "devDependencies": {
    "@testing-library/react": "^12.1.2",
    "@types/react-router-dom": "^5.3.2",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "eslint": "^7.11.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1",
    "prettier": "2.4.1",
    "typescript": "^4.5.2"
  },
  "eslintConfig": {
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "extends": [
      "react-app"
    ]
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "url-parse": ">=1.5.0",
    "lodash": ">=4.17.21"
  }
}

If I revert react-scripts to 4.0.3, it works fine. But then some other packages like eslint are not compatible with this version of react-scripts.

What I've already tried

I found many similar threads on SO and GitHub and I've already tried:

adding FAST_REFRESH=false to .env file - changed nothing
changing my start script to "start": "FAST_REFRESH=false react-scripts start" - I got this error on app startup: 'FAST_REFRESH' is not recognized as an internal or external command
changing my start script to "start": "CHOKIDAR_USEPOLLING=true react-scripts start" - I got this error on app startup: 'CHOKIDAR_USEPOLLING' is not recognized as an internal or external command

Any ideas what could be the reason here?

Solution

Update

It's likely a bug introduced in CRA5: issue

Using WDS_SOCKET_PORT=0 will allow the solution to work with all debug configurations.

=================================================

I notice that, after upgrading to CRA5, the react dev client starts to respect the current page's protocol. That is, if you are debugging your asp.net core project using https locally, the react dev client will also try to connect to node dev server with wss(websocket over TLS) which is not enabled by default. There are several ways to get around with this, the simplest way would be:

create a file with name .env.development in the same folder where lies your package.json.
put WDS_SOCKET_PORT=<your asp.net core app port> in .env.development you just created. <your asp.net core app port> should be 5001 by default if you are using the SPA template generated by dotnet cli.

This will allow the ws connection initiated by react dev client to be proxified to node dev server with UseReactDevelopmentServer middleware.