升级VSCode后tsconfig的jsx自动变preserve致项目报错求助

原本运行正常的项目，在升级VSCode至1.74.0（对应内置TypeScript 4.9.3）后，出现以下异常：

• 执行npm start时，tsconfig.json中的"jsx": "react-jsx"会被自动修改为"preserve"
• 同时收到提示：

compilerOptions.jsx must be preserve (JSX is compiled by Babel)

上述问题导致项目无法正常运行，报错频发。已尝试的排查操作包括：

• 删除node_modules文件夹并重新执行npm i重装依赖
• 确保项目本地TypeScript版本与VSCode内置版本一致（均为4.9.3）

问题根源 #

查看项目package.json可知，当前使用的react-scripts版本为^2.1.3，这是Create React App的旧版本，存在两个关键兼容问题：

1. 不支持React 18引入的react-jsx自动导入模式，会强制将tsconfig的jsx选项改为preserve——因为旧版依赖Babel而非TypeScript编译JSX
2. 与项目中使用的React 18.x版本不兼容，进一步加剧了配置冲突

解决方案 #

方案1：升级react-scripts到兼容版本（推荐）

升级到Create React App v5.x版本（对应react-scripts v5.x），该版本完全支持React 18和TypeScript 4.x的react-jsx模式：

1. 卸载旧版react-scripts：

npm uninstall react-scripts

2. 安装最新稳定版：

npm install react-scripts@latest

3. 重新执行npm start，此时tsconfig.json的"jsx": "react-jsx"会保持不变，项目可恢复正常运行。

方案2：临时适配旧版react-scripts（不推荐）

若因依赖限制暂时无法升级react-scripts，可通过以下方式适配：

1. 保留tsconfig.json中的"jsx": "preserve"设置，不要手动修改为react-jsx
2. 在所有包含JSX的.tsx文件顶部，手动引入React：

import React from 'react';

旧版react-scripts依赖Babel编译JSX，需要显式引入React才能正常工作。

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