React+TypeScript执行npm run build未加载tsconfig.json问题排查

问题原因 #

Create React App（CRA）的构建流程不会直接读取项目根目录的tsconfig.json，它默认使用react-scripts包内置的TypeScript配置文件。你修改根目录的tsconfig.json后，构建过程完全不会加载这个文件，所以不管是调整include/exclude、修改outDir，甚至配置文件语法损坏，都不会对构建产生任何影响，也不会抛出错误。

解决方案 #

推荐使用CRACO（无需eject，保留CRA更新能力）来覆盖TypeScript配置，或者选择eject（不可逆，不推荐）。

方案1：使用CRACO自定义配置（推荐）

1. 安装CRACO及TypeScript插件：

npm install @craco/craco @craco/typescript --save-dev

2. 在项目根目录创建craco.config.js，配置自定义tsconfig路径：

const { CracoTsConfigPlugin } = require('@craco/typescript');

module.exports = {
  plugins: [
    {
      plugin: CracoTsConfigPlugin,
      options: {
        tsconfigPath: './tsconfig.custom.json'
      }
    }
  ]
};

3. 复制根目录的tsconfig.json为tsconfig.custom.json，在这个文件里修改你需要的配置（比如outDir: "myfolder"、调整include/exclude规则等）。
4. 修改package.json中的脚本命令，替换为CRACO的命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

5. 执行npm run build验证配置，此时你的自定义TypeScript规则会生效，配置错误也会被正常检测并抛出。

方案2：执行eject（不可逆，不推荐）

如果你能接受暴露所有CRA内置配置（后续无法直接升级CRA），可以执行：

npm run eject

执行后，项目根目录会生成config文件夹，其中的webpack.config.js会直接读取根目录的tsconfig.json，此时修改该文件就能生效。

AWS Amplify适配 #

• 在Amplify的构建设置中，保持构建命令为npm run build即可（因为已经替换了package.json中的脚本）。
• 如果将outDir改为myfolder，需要在Amplify的部署设置里，把部署源目录从默认的build改为myfolder。

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