Create React App+TS类型错误致UI被黑屏遮挡如何解决

你看到的全屏错误黑屏是Create React App（CRA）开发环境默认内置的错误覆盖层，默认规则下只要出现TS类型错误、编译错误、ESLint校验错误，就会直接在页面最上层渲染黑底错误块挡住UI，这些错误本身本来就会同步打印在启动服务的终端里。

根据你要的「类型错误仅在终端显示、不弹出页面遮挡」的需求，有两种可直接落地的方案，不需要eject弹出CRA内置配置：

方案1：仅关闭TS/ESLint错误触发的遮罩（推荐） #

这个方案不会关闭语法错误等硬编译错误的遮罩，只会把TS类型错误、ESLint校验错误降级为警告，不触发页面遮挡，适合大部分开发场景：

• 在项目根目录新建名为.env.development的文件（该配置仅对本地开发环境生效，不影响生产构建）
• 在文件中写入以下两行配置：

TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

• 终止当前运行的npm start/yarn start进程，重新启动开发服务即可生效。后续所有TS类型错误只会出现在终端和浏览器控制台，不会弹出全屏黑块。

方案2：完全关闭所有开发环境错误遮罩 #

如果你连语法编译错误的遮罩也不想看到，所有错误都只看终端输出，可以通过craco轻量修改CRA的webpack配置实现：

1. 先安装craco依赖：

npm install @craco/craco -D

2. 在项目根目录新建craco.config.js配置文件，写入以下内容：

module.exports = {
  devServer: {
    client: {
      overlay: false,
    },
  },
};

3. 修改package.json里的脚本命令，把原有react-scripts替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

4. 重启开发服务后，所有开发阶段的错误都不会再弹出页面遮罩，全部输出到终端。

你贴出的TS2322: Type 'boolean' is not assignable to type 'string'是真实的类型错误：react-router-dom的Route组件element属性要求传入可渲染的JSX节点或者字符串，你传入的hi是布尔值，就算关了错误遮罩，这个路由也无法正常渲染，记得修正对应代码。

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