使用Vite+React+TypeScript+Tailwind开发时tsc --watch报错求助

问题场景 #

使用Vite、React.js、TypeScript 5.6.2和Tailwind CSS开发Web应用，执行tsc --watch时出现以下错误：

tsconfig.json:3:25 - error TS6046: The argument to the '--moduleResolution' option must be: 'node', 'classic', 'node12', 'nodenext'.

tsconfig.json:8:5 - error TS5023: Unknown compiler option 'allowImportingTsExtensions'.

tsconfig.json:21:5 - error TS5070: Option '--resolveJsonModule' cannot be specified without module resolution strategy 'node'.

环境版本：

• TypeScript: 5.6.2
• Node.js: 20.13.0

当前tsconfig.json内容：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "es2020",
    "composite": true,
    "target": "ES2020",
    "jsx": "react-jsx",
    "allowImportingTsExtensions": true,
    "skipLibCheck": true,
    "lib": [
      "DOM",
      "ESNext",
      "ES2020",
      "DOM.Iterable"
    ],
    "types": [
      "vite/client",
      "jest"
    ],
    /* Bundler mode */
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "./dist"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./src/__tests__/**/*.ts",
    "./src/__tests__/**/*.tsx"
  ]
}

已尝试但无效的操作：

• 执行npm install typescript@latest
• 删除node_modules和package-lock.json后重新执行npm install

解决方案 #

1. 修改tsconfig.json核心配置 #

直接运行tsc时，TypeScript编译器不支持bundler这个moduleResolution选项（该选项仅针对Vite等构建工具），需调整为tsc支持的选项并确保配置兼容：

修改后的compilerOptions部分：

"compilerOptions": {
  "moduleResolution": "node16",
  "module": "ESNext",
  "composite": true,
  "target": "ES2020",
  "jsx": "react-jsx",
  "allowImportingTsExtensions": true,
  "skipLibCheck": true,
  "lib": [
    "DOM",
    "ESNext",
    "ES2020",
    "DOM.Iterable"
  ],
  "types": [
    "vite/client",
    "jest"
  ],
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true
}

关键修改点：

• 将moduleResolution从bundler改为node16：这是tsc支持的选项，适配Node.js 20的模块系统，同时解决resolveJsonModule的依赖问题
• 将module改为ESNext：与node16的模块解析策略匹配，确保兼容性
• 保留allowImportingTsExtensions：TypeScript 5.2+支持该选项，当前配置中noEmit: true，符合使用条件

2. 确保使用本地项目的TypeScript版本 #

若全局安装的TypeScript版本低于5.6.2，直接执行tsc --watch会使用旧版本导致错误，需改用项目本地的TS版本：

npx tsc --watch

验证 #

修改配置后执行npx tsc --watch，应不再出现上述编译错误。

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