新建React项目出现Mui components have no exports ('export default')错误求助

问题背景 #

我刚创建了一个新的React项目，按照MUI官方文档的指引安装了所有必要依赖，包括：

• npm install @mui/material @emotion/react @emotion/styled
• npm install @fontsource/roboto
• npm install @mui/icons-material
• npm install react-router react-router-dom

但启动未填充内容的空白项目时，出现了MUI模块无导出的错误，请问是否遗漏了什么步骤？

解决思路与方案 #

• 校验React版本兼容性：MUI v5要求React及ReactDOM版本≥17.0.0，打开项目的package.json确认版本是否达标，版本过低会引发模块导出异常。
• 重置依赖环境：执行以下命令清理缓存并重装依赖，解决可能的依赖损坏或安装不完整问题：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 核对导入语法：确保使用MUI v5的正确导入路径，避免使用@material-ui/core这类旧版包的导入方式，示例：

  // 正确
  import Button from '@mui/material/Button';
  // 错误（旧版路径）
  import Button from '@material-ui/core/Button';
  

• 确认ES模块配置：若为自定义webpack项目，需确保package.json中添加"type": "module"，或webpack配置已正确处理ES模块；Create React App项目默认无需额外配置。
• 排查版本冲突：运行npm ls @mui/material查看是否存在多版本MUI包，版本冲突会导致导出逻辑异常，可通过锁定版本或清理冗余依赖解决。

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