引入Material UI组件后触发Invalid hook call错误的问题咨询

你已经排除了React和React-DOM版本不匹配的问题，该报错大概率来自以下两种场景，按优先级排查即可： #

1. Material UI版本与React版本不兼容 #

你使用的@material-ui是MUI v4的旧版本包，仅支持React 16/17，如果你当前项目用的是React 18及以上版本，旧版MUI组件内部的Hook调用逻辑无法适配新版React的渲染规则，就会触发该报错。

最优解决方法（推荐） #

卸载旧版MUI，升级到适配React 18的新版MUI包：

1. 卸载旧依赖

npm uninstall @material-ui/core @material-ui/icons

2. 安装新版MUI依赖

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

3. 修改Sidebar组件的导入语句即可，其余代码无需改动：
   把import SearchIcon from '@material-ui/icons/Search'替换为import SearchIcon from '@mui/icons-material/Search'

替代解决方法（不推荐） #

如果不想更换MUI版本，将项目的React和React-DOM版本降级到17.x即可：
修改package.json中对应的版本号为：

"react": "^17.0.2",
"react-dom": "^17.0.2"

删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件后，重新执行npm install或yarn install安装依赖。 #

2. 项目存在多份React副本 #

依赖安装冲突可能导致项目中存在多个不同版本的React实例，触发Hook调用规则校验报错。

排查&解决方法 #

1. 执行命令检查是否存在多份React：

npm ls react
# 用yarn的话执行 yarn list react

如果输出中存在多个不同版本的React，执行以下命令合并重复依赖：

npm dedupe
# 用yarn的话执行 yarn dedupe

2. 若合并后仍存在问题，可在package.json中添加版本固定配置：

"resolutions": {
  "react": "^你当前项目使用的React版本号",
  "react-dom": "^你当前项目使用的React-DOM版本号"
}

添加后重新安装依赖即可。

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