升级create-react-app至4.0 TypeScript模板时启动报错求助

我刚帮不少开发者搞定过这个升级后的报错问题，核心原因是react-scripts 4.0.0的TypeScript配置校验脚本试图自动补充你的tsconfig配置，但你的配置对象被设置成了不可扩展（比如被工具冻结，或者加载时被Object.freeze处理过），导致脚本无法添加新的配置项。下面是几个逐步解决的方案：

方案1：手动添加缺失的配置项（最推荐） #

既然脚本想要自动添加noFallthroughCasesInSwitch这个配置，我们直接手动加到tsconfig.json里，就能绕过脚本的自动修改逻辑：
打开项目根目录的tsconfig.json，在compilerOptions里添加该配置：

{
  "compilerOptions": {
    // 你的其他配置...
    "noFallthroughCasesInSwitch": true
  }
}

保存后重新执行yarn start，大概率就能正常启动了。

方案2：清理依赖缓存并重新安装 #

有时候依赖安装过程中会出现缓存异常，导致配置加载异常：

1. 先删除本地依赖和锁文件：

   rm -rf node_modules yarn.lock
   

2. 重新安装依赖：

   yarn install
   

3. 再次启动服务：

   yarn start
   

方案3：检查是否有工具冻结了tsconfig配置 #

如果你的项目使用了某些配置管理工具（比如自定义的webpack插件、配置生成脚本），检查这些工具是否对tsconfig对象执行了Object.freeze操作，移除冻结逻辑即可。

方案4：临时修改react-scripts脚本（紧急情况用） #

如果上面的方法都暂时没法生效，可以临时修改react-scripts的校验脚本（注意：下次依赖更新会覆盖这个修改，所以只是临时方案）：

1. 打开node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
2. 找到第210行左右的代码：

   appTsConfig.compilerOptions[option] = suggested;
   

3. 修改为带可扩展性检查的逻辑：

   if (Object.isExtensible(appTsConfig.compilerOptions)) {
     appTsConfig.compilerOptions[option] = suggested;
   }
   

4. 保存后重新执行yarn start

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