使用Vite运行React时Material UI库报错：styled_default is not a function

以下是针对这个错误的可行解决方案，按优先级尝试：

• 检查@mui/material与@mui/styled-engine版本兼容性
  这个错误大概率是两个包版本不匹配导致的，即使你降级了@mui/material，@mui/styled-engine可能仍保留着不兼容的版本。

  1. 先查看当前依赖版本：

     npm list @mui/material @mui/styled-engine
     

  2. 安装与你之前正常运行版本一致的配对包（比如替换为5.14.18）：

     npm install @mui/material@5.14.18 @mui/styled-engine@5.14.18
     

• 彻底清除缓存并重装依赖
  仅删除node_modules不足以清理所有缓存残留，执行以下步骤：

  # 删除依赖文件和lock文件
  rm -rf node_modules package-lock.json
  # 清除npm缓存
  npm cache clean --force
  # 清除Vite构建缓存
  vite build --emptyOutDir
  # 重新安装依赖
  npm install
  

• 移除冲突的styled依赖包
  如果项目中同时存在@emotion/styled、@mui/styled-engine-sc这类包，会和@mui/styled-engine产生冲突：

  1. 检查是否存在冲突依赖：

     npm list @emotion/styled @mui/styled-engine-sc
     

  2. 卸载多余的包：

     npm uninstall @emotion/styled @mui/styled-engine-sc
     

• 还原到之前正常的依赖快照
  如果你用Git管理项目，直接恢复到之前正常运行时的lock文件：

  # 恢复上一个版本的package-lock.json（根据实际情况调整commit）
  git checkout HEAD~1 package-lock.json
  rm -rf node_modules
  npm install
  

• 排查Vite配置变更
  检查最近是否修改过vite.config.js，比如新增的别名、优化插件等可能影响模块解析。暂时注释掉新增配置，重启项目测试。

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