更新yup后Create React App项目类型无效导入不触发构建启动报错

可行解决方案如下： #

方案1：在启动/构建流程前置全量TypeScript校验（最稳妥，100%复现IDE能识别的所有类型错误）

Create React App 默认的 react-scripts build 和 npm start 仅执行代码转译，不会默认跑全量类型校验，你此前看到的报错本质是ESLint规则校验的结果。你可以直接在脚本中添加tsc校验步骤，完全覆盖类型导入错误的检测：
修改package.json的scripts配置：

{
  "scripts": {
    "start": "tsc --noEmit && react-scripts start",
    "build": "tsc --noEmit && react-scripts build"
  }
}

修改后，不管ESLint规则是否覆盖到相关场景，只要是TypeScript能识别的错误（包括导入不存在的类型成员）都会在启动、构建阶段抛出，和IDE的报错完全对齐。

方案2：补全ESLint的类型校验规则

你当前的ESLint配置只引入了基础的@typescript-eslint/recommended扩展，缺失了依赖TS类型信息的校验规则集，导致导入不存在的类型这类错误不会被ESLint捕获。你可以修改.eslintrc.json的extends配置：

{
  "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ]
}

修改后ESLint会启用全部依赖类型系统的校验规则，包括对无效类型导入的检测。

额外排查项

如果以上方案还未生效，可以做如下检查：

• 删除node_modules文件夹和package-lock.json文件，重新执行npm install，排除yup版本更新带来的类型声明缓存冲突
• 检查项目全局类型声明文件中是否存在declare module "*"的泛型模块声明，这类声明会把所有模块的类型转为any，导致无效导入无法被识别
• 确认你的tsconfig中没有把业务代码所在的目录加入exclude配置，导致全量校验时跳过了业务文件

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