MUI v5编译报错：无法在@mui/styled-engine中解析@emotion/react

Material UI v5 默认采用Emotion作为样式渲染引擎，@emotion/react、@emotion/styled属于对等依赖，不会随@mui/material等核心包自动安装，因此会触发模块找不到的报错。

方案1：安装默认依赖（推荐） #

根据你使用的包管理器执行对应命令即可：

• 使用npm：

npm install @emotion/react @emotion/styled

• 使用yarn：

yarn add @emotion/react @emotion/styled

• 使用pnpm：

pnpm add @emotion/react @emotion/styled

方案2：切换为styled-components作为样式引擎 #

如果你项目中已经在使用styled-components，不需要额外引入Emotion，可以调整MUI的样式引擎配置：

1. 先安装styled-components版本的样式引擎包：

npm install @mui/styled-engine-sc styled-components

2. 在打包工具配置中添加别名映射，以webpack为例，在webpack.config.js的resolve.alias下添加：

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@mui/styled-engine': '@mui/styled-engine-sc'
    },
  },
}

依赖安装后仍报错的排查步骤 #

如果执行完上述安装操作还是报错，按以下步骤处理：

• 删除node_modules文件夹和包管理锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
• 重新执行依赖安装命令
• 清除本地编译缓存后重启开发服务，比如使用npm start启动的项目可以先执行对应清理脚本，或者删除.cache、build、dist等编译产物目录后重启服务

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