安装@mui/styles后tsconfig的jsx配置变更引发React未定义错误求助

我在TypeScript React项目里执行npm i @mui/styles后，tsconfig.json里的"jsx": "react-jsx"被自动改成了"jsx": "preserve"，运行项目时弹出ReferenceError: React is not defined错误，错误详情如下：

×
←→1 of 3 errors on the page
ReferenceError: React is not defined
App
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/src/App.tsx:6
  3 | import CustomRoutes from './components/Routes';
  4 | 
  5 | function App() {
> 6 |   return (
  7 |     <div className="App">
  8 |         {/* <MuiTypography /> */}
  9 |       <CustomRoutes />
View compiled
renderWithHooks
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:14141
  14138 |     ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
  14139 |   }
  14140 | }
> 14141 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  14142 | 
  14143 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
  14144 |   // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:17432
  17429 |   }
  17430 |   setIsRendering(true);
  17431 |   ReactCurrentOwner$1.current = workInProgress;
> 17432 |   value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
        | ^  17433 |   hasId = checkDidRenderIdHook();
  17434 |   setIsRendering(false);
  17435 | }
View compiled
beginWork
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:18728
  18725 | switch (workInProgress.tag) {
  18726 |   case IndeterminateComponent:
  18727 |     {
> 18728 |       return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes);
        | ^  18729 |     }
  18730 |   case LazyComponent:
  18731 |     {
View compiled
HTMLUnknownElement.callCallback
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3733
  3730 | function callCallback() {
  3731 |   didCall = true;
  3732 |   restoreAfterDispatch();
> 3733 |   func.apply(context, funcArgs);
       | ^  3734 |   didError = false;
  3735 | } // Create a global error event handler. We use this to capture the value
  3736 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3777
  3774 | // errors, it will trigger our global error handler.
  3775 | 
  3776 | evt.initEvent(evtType, false, false);
> 3777 | fakeNode.dispatchEvent(evt);
       | ^  3778 | if (windowEventDescriptor) {
  3779 |   Object.defineProperty(window, 'event', windowEventDescriptor);
  3780 | }

1. 恢复JSX编译配置 #

直接打开tsconfig.json，把"jsx": "preserve"改回"jsx": "react-jsx"。这个配置会让TypeScript在编译时自动给每个用JSX的文件注入React导入，不用你手动写import React from 'react'。

2. 防止配置被自动修改（可选） #

如果不想后续安装依赖时再被篡改配置，可以：

• 在package.json里添加resolutions字段（yarn或npm v8+支持），强制锁定相关依赖版本：

"resolutions": {
  "@mui/styles": "你的安装版本号"
}

• 或者安装时用--save-exact参数，精准锁定版本：

npm i @mui/styles --save-exact

3. 临时兼容方案（不推荐） #

要是暂时没法改配置，就在每个使用JSX的.tsx文件顶部手动加React导入：

import React from 'react';

tsconfig.json是TypeScript项目的核心配置文件，用来告诉TypeScript编译器怎么处理你的代码：

• 指定编译后的JS版本（比如ES6、ESNext）
• 配置JSX的编译模式（就是这次出问题的jsx字段）
• 定义哪些文件要参与编译、哪些要排除
• 设置类型检查的严格程度、模块解析规则
• 指定编译产物的输出目录、是否生成source map等

简单说，所有和TypeScript编译相关的规则都在这里定义，它决定了你的TS代码怎么转成浏览器能跑的JS代码。

内容的提问来源于stack exchange，提问作者L O C O