为什么 react-app在打字稿中在编辑时不能热重载

如何解决为什么 react-app在打字稿中在编辑时不能热重载

有三种情况。全部发生在 Window 10 WSL Ubuntu 上：

本周我使用 --template typescript 创建了一个新的 React 应用程序。 yarn starting 后，各种编辑都不会触发任何热重载。

我yarn start编写了 2020 年 7 月创建的旧 React 应用（使用 --template typescript 创建）。package.json 和 tsconfig.json 上的配置没有修改自创建以来，但无法触发热重载。

package.json（建于 2020 年 7 月）

{
  "name": "00_test","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","@types/jest": "^24.0.0","@types/node": "^12.0.0","@types/react": "^16.9.0","@types/react-dom": "^16.9.0","react": "^16.13.1","react-dom": "^16.13.1","react-scripts": "3.4.1","typescript": "^3.7.2","web-vitals": "^1.1.0"
  },"scripts": {
    "start": "PORT=4000 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"
    ]
  }
}

tsconfig.json（2020 年 7 月构建）

{
  "compilerOptions": {
    "target": "es5","lib": [
      "dom","dom.iterable","esnext"
    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"
  },"include": [
    "src"
  ]
}

我这周创建了一个新的 react-app（仅使用 js）， yarn starting 后，各种编辑根本不会触发任何热重载。

奇怪的是，在所有 3 种情况下，编译成功后都不会触发通常的自动弹出新浏览器！

我在谷歌上搜索了很多，但只找到了一个不适用的案例（指定为 webpack 问题）。 React 的 github 页面没有显示类似的问题。

我的环境从 2020 年 7 月到现在的变化：

使用了具有复杂网络配置选项的新华硕 wifi 路由器 (AC68U)；
VS-code 升级到 v1.53.1（2021 年 1 月版）；
Windows 10 保持升级；
使用 WSL2 代替 WSL1；
添加nvm管理nodejs版本