React运行报错：export 'useId' (imported as 'React') was not found in 'react'如何解决

• useId 是 React 18.0.0 才正式发布的内置Hook，你当前项目安装的React版本低于18，而你引入的高版本MUI组件库默认依赖React 18的API，因此会触发该导出不存在的报错。

• 打开项目根目录下的package.json文件，查看dependencies字段中react、react-dom的版本号，确认是否低于18.0.0。

方案1（推荐）：升级React到18及以上版本 #

1. 执行升级命令安装最新版React：

# npm 环境
npm install react@latest react-dom@latest

# yarn 环境
yarn add react@latest react-dom@latest

2. 同步修改项目入口文件的渲染逻辑适配React 18，示例如下：

// 旧版React 17的写法
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

// 新版React 18的写法
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

方案2：降级MUI到兼容React 17的版本 #

如果暂时无法升级React，可以将MUI降级到v5.11.0之前的版本，该版本区间兼容React 17：

# npm 环境
npm install @mui/material@5.11.0 @emotion/react@11 @emotion/styled@11

# yarn 环境
yarn add @mui/material@5.11.0 @emotion/react@11 @emotion/styled@11

如果完成上述操作后仍报错，可按以下步骤处理：

• 删除项目根目录的node_modules文件夹，以及锁文件package-lock.json或yarn.lock，重新执行依赖安装命令
• 检查webpack配置中的resolve.alias字段，确认是否有强制绑定旧版本React路径的配置，如有则删除相关配置

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