为何前端Monorepo子目录需单独配置tsconfig.json（即便仅继承根配置）

问题本质 #

TypeScript本身会从当前目录向上递归查找tsconfig.json，但Vite的编译逻辑有特殊处理：当处理子项目时，如果子项目目录下没有tsconfig.json，Vite不会自动向上加载根目录的配置，而是会启用内置的默认TS配置。

而Vite默认的TS配置中，并未开启jsx: "react-jsx"（或"automatic"）这个关键选项——该选项的作用是让TS自动在JSX文件中注入import React from 'react'的逻辑，缺少它就会触发Uncaught ReferenceError: React is not defined错误。

解决方法 #

方法1：子项目添加极简继承式tsconfig.json

在子项目根目录创建tsconfig.json，仅继承根配置即可，无需重复写所有设置：

{
  "extends": "../../tsconfig.json"
}

注意：根据子项目在Monorepo中的层级调整extends的相对路径

方法2：在Vite配置中显式指定根tsconfig路径

在子项目的vite.config.ts中，直接指定使用根目录的TS配置文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  typescript: {
    tsconfig: '../../tsconfig.json'
  }
});

补充说明 #

如果所有子项目的TS配置完全一致，也可以在根目录的vite.config.ts中全局配置TS选项，但这种方式灵活性不如前两种方法，仅适用于统一配置的场景。

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