react项目运行测试时tsconfig.json被覆盖引发TS错误如何解决？

我每次运行测试时，我的tsconfig.json文件都会被覆盖，测试成功通过后就会抛出如下报错：

rpt2: config error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
(rpt2 plugin) Error: /main/src/index.tsx(1,30): semantic error TS6142: Module './ExampleComponent' was resolved to '/main/src/ExampleComponent/index.tsx', but '--jsx' is not set.

运行代码时还会收到如下提示：

The following changes are being made to your tsconfig.json file:
  - compilerOptions.allowJs to be suggested value: true (this can be changed)
  - compilerOptions.skipLibCheck to be suggested value: true (this can be changed)
  - compilerOptions.strict to be suggested value: true (this can be changed)
  - compilerOptions.forceConsistentCasingInFileNames to be suggested value: true (this can be changed)
  - compilerOptions.noFallthroughCasesInSwitch to be suggested value: true (this can be changed)
  - compilerOptions.resolveJsonModule must be true (to match webpack loader)
  - compilerOptions.isolatedModules must be true (implementation limitation)
  - compilerOptions.noEmit must be true
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

我已经尝试过如下操作，均没有效果：

• 设置VSCode使用工作区版本的Typescript（4.3.5）
• 手动修改tsconfig.json参数（但无论我修改什么内容，只要运行测试就会被覆盖）
• 将VSCode更新到最新版本
• 重启TS服务

我最初的tsconfig配置如下：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "types": ["webrtc"]
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

运行测试后被修改的tsconfig配置如下：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": [
      "dom",
      "esnext"
    ],
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "types": [
      "webrtc"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

项目中还有自动生成的react-app-env.d.ts文件，内容如下：

/// <reference types="react-scripts" />

VSCode的settings.json配置如下：

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

我使用的依赖版本如下：

• typescript 4.3.5
• react-scripts 4.0.3
• react 17.0.2

1. 关闭react-scripts自动修改tsconfig的行为
   在项目根目录创建.env文件，添加以下配置：

DISABLE_NEW_JSX_TRANSFORM=true

这个参数会禁止react-scripts@4.x强制将jsx配置修改为react-jsx，也不会自动追加其他它默认要求的编译参数，之后你手动修改的tsconfig内容就不会被覆盖。

2. 修复rpt2插件报错
   你收到的TS6046报错是因为rollup-plugin-typescript2（rpt2）加载的TypeScript版本过低，不识别react-jsx参数。你可以二选一处理：

• 如果你想保留原来的jsx: react配置，添加上述.env参数后手动把tsconfig里的jsx项改回react即可
• 如果你想使用新的JSX转换，将rpt2升级到最新版本，确保它会加载你项目本地安装的TypeScript 4.3.5

3. 验证生效
   修改完成后重启VSCode的TypeScript服务，重新运行测试确认配置不会被覆盖，报错消失。

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