MUI IconButton导入报错：无法解析react-transition-group

问题重现 #

导入或使用MUI的IconButton/Button组件时，出现以下编译错误：

./node_modules/@mui/material/ButtonBase/TouchRipple.js
Module not found: Can't resolve 'react-transition-group' in '#/node_modules/@mui/material/ButtonBase'

已执行npm install react-transition-group和依赖重置操作（删除node_modules、package-lock.json并重装），但问题仍存在。仅导入组件未使用也会触发错误，替换为Button组件报错一致。

排查与解决步骤 #

1. 确认react-transition-group实际安装状态 #

先检查依赖是否真的安装成功：

• 查看项目根目录的node_modules文件夹，确认是否存在react-transition-group目录
• 执行命令查看已安装版本：

  npm list react-transition-group
  

如果输出显示未找到，执行强制安装命令：

npm install react-transition-group@4.4.3 --force

2. 检查路径别名配置 #

错误信息中的#/node_modules路径异常，可能是项目的路径别名配置导致解析错误：

• 查看项目中的jsconfig.json或tsconfig.json文件，检查compilerOptions.paths是否有指向#的别名规则
• 如果存在可能干扰node_modules解析的别名，尝试临时注释该配置后重新编译

3. 升级react-scripts版本 #

当前使用的react-scripts版本为4.0.3，与MUI 5.x可能存在兼容性问题，尝试升级到5.x版本：

npm install react-scripts@latest --save

升级后需重新启动开发服务器，注意处理可能出现的其他依赖兼容问题（React 17.0.2可兼容react-scripts 5.x）

4. 换用Yarn管理依赖 #

若npm仍存在缓存或锁文件问题，尝试用Yarn替代：

rm -rf node_modules package-lock.json
npm install -g yarn
yarn install

5. 检查依赖冲突 #

查看是否有其他依赖包与react-transition-group存在版本冲突：

npm ls react-transition-group

如果输出显示多个版本的react-transition-group，执行以下命令清除重复依赖：

npm dedupe

补充说明 #

你的代码中Container组件的maxWidth="x1"是笔误，应为maxWidth="xl"，虽不会导致当前编译错误，但建议修正避免后续布局问题。

内容的提问来源于stack exchange，提问作者L.P.