遇到TypeScript错误时Hot reloading热重载失效如何解决

以下是经过实测可落地的解决方法，按改造成本从低到高排序：

零配置改动方案（无需修改webpack、无需eject） #

• 开启TS错误非阻断模式
  在项目根目录新建/修改.env文件，添加配置项：
  TSC_COMPILE_ON_ERROR=true
  配置生效后，开发环境下遇到TypeScript错误时仅会在控制台、页面浮层抛出错误提示，不会直接终止编译进程。修复错误后热重载可正常响应，无需手动重启服务。配置完成后需要手动重启一次dev server生效。
• 加进程自动兜底逻辑
  如果不希望放宽TS校验规则，可以通过进程监听工具实现异常退出自动重启，不影响正常热重载逻辑：
  1. 安装开发依赖：npm install nodemon -D
  2. 修改package.json内的启动脚本：

  "scripts": {
    "start": "nodemon --watch src --ext ts,tsx,js,jsx,json --exec 'react-scripts start'"
  }
  

  该方案完全保留CRA原有编译和校验逻辑，即便偶发TS错误导致编译进程退出，nodemon也会自动重启服务，省去手动操作的成本。

根治方案（适用于已eject或使用craco/react-app-rewired做配置扩展的项目） #

该问题的根源是CRA旧版本内置的fork-ts-checker-webpack-plugin默认走同步阻塞模式，TS错误抛出后会锁死webpack编译缓存，导致后续文件变更无法触发重编译。可以通过修改插件配置彻底解决：

• 以craco配置为例，在craco.config.js中添加如下逻辑：

module.exports = {
  webpack: {
    configure: (config) => {
      const tsPlugin = config.plugins.find(
        item => item.constructor.name === 'ForkTsCheckerWebpackPlugin'
      )
      if (tsPlugin) {
        // 开启异步类型检查，不阻塞主编译进程
        tsPlugin.options.async = true
      }
      return config
    }
  }
}

• 如果使用的是CRA 5.0+版本，直接将react-scripts升级到最新的小版本即可，官方已经在后续迭代中修复了该类类型检查导致的缓存锁死问题。

注意：不要通过全局关闭TS校验的方式规避问题，会丢失开发环境的类型提示能力，反而增加线上出bug的概率。

内容的提问来源于stack exchange，提问作者homy