React项目使用Material UI导入图标提示Module not found错误求助

问题原因 #

项目同时存在Material UI v4、v5两个版本的依赖，两个版本的图标包命名、导入路径不兼容：

• v4版本图标包为@material-ui/icons，导入路径前缀为@material-ui/icons/
• v5版本图标包重命名为@mui/icons-material，导入路径前缀为@mui/icons-material/
  你已安装v4版本图标包，但代码中使用了v5版本的导入路径，且没有安装对应v5图标依赖，因此抛出模块找不到错误。

解决方案（二选一即可，不要混用） #

方案1：统一使用v5生态（推荐） #

你已经安装了v5版本的核心组件包@mui/material，优先推荐全量升级到v5：

• 安装v5图标依赖：
  npm install @mui/icons-material @emotion/react @emotion/styled
• 卸载不需要的v4依赖（可选）：
  npm uninstall @material-ui/core @material-ui/icons
• 所有组件、图标统一使用v5路径导入即可，示例：

  import Menu from '@mui/icons-material/Menu'
  import Button from '@mui/material/Button'
  

方案2：保留v4版本导入规则 #

如果不需要使用v5新特性，可以继续沿用v4的导入方式：

• 无需安装新依赖，直接修改代码中的图标导入语句即可，把import Menu from '@mui/icons-material/Menu'替换为：

  import Menu from '@material-ui/icons/Menu'
  

• 对应核心组件也使用v4路径导入：

  import Button from '@material-ui/core/Button'
  

注意事项 #

不要混用两个版本的导入路径，否则会持续出现模块找不到问题，还可能引发样式冲突、组件渲染异常等问题。

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