引入Material UI组件报Invalid hook call错误问题求助

任意MUI组件渲染就触发Uncaught Error: Invalid hook call.，和你业务代码里的Hook调用、组件使用位置完全无关，问题出在依赖配置：

• 你同时安装了两个完全不兼容的MUI主版本：v4版本的@material-ui/core和v5版本的@mui/material/@mui/icons-material，两个版本依赖的React上下文、内部运行逻辑冲突，会直接导致Hook调用链路错乱。
• MUI v5缺少强制peer依赖：v5版本默认使用Emotion作为样式引擎，你没有安装@emotion/react、@emotion/styled两个必须依赖，组件初始化样式逻辑时就会触发Hook调用异常。

按顺序执行以下操作即可解决：

1. 卸载冲突的旧版MUI包

npm uninstall @material-ui/core
# 如果项目里还有其他@material-ui/前缀的包，一并卸载

2. 安装MUI v5缺失的必装依赖

npm install @emotion/react @emotion/styled

3. 清理依赖缓存，避免残留冲突文件

rm -rf node_modules package-lock.json
npm install

4. 调整导入顺序（非强制，符合编码规范）：将React的导入语句放到所有导入的最顶部，修正后导入代码如下：

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import Box from '@mui/material/Box';

如果操作完仍有报错，执行以下命令检查项目中是否存在多版本React实例：

npm ls react

正常输出应该仅存在一个17.0.2版本的React，如果存在其他版本的React依赖，在package.json中添加resolutions字段锁定React版本即可解决。

你测试时把Modal的open属性硬编码为true依然报错，刚好可以印证问题和你写的状态控制逻辑无关，是依赖层的冲突导致MUI组件内部的Hook调用就已经失败了。

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