Next.js导入Material UI报ENOENT文件不存在错误该如何解决？

该报错本质是@emotion/styled包的对应版本不匹配、依赖缓存异常或Next.js编译配置缺失导致的，按以下步骤排查解决即可：

• 第一步：清除依赖缓存
  你之前卸载重装依赖未清理缓存会导致损坏的包版本仍然被复用，按你使用的包管理器执行对应操作：
  • npm用户：删除项目根目录的node_modules文件夹和package-lock.json文件，执行npm cache clean --force后重新执行npm install
  • yarn用户：删除项目根目录的node_modules文件夹和yarn.lock文件，执行yarn cache clean后重新执行yarn install
  • pnpm用户：删除项目根目录的node_modules文件夹和pnpm-lock.yaml文件，执行pnpm store prune后重新执行pnpm install
• 第二步：检查依赖版本兼容性
  MUI v5要求@emotion/react和@emotion/styled版本需 >=11.0.0以上版本，如果项目有其他依赖锁定了低版本的emotion包，会导致文件缺失。你可以手动安装对应稳定版强制覆盖版本：

npm install @emotion/react@^11.11.0 @emotion/styled@^11.11.0

如果使用npm还可以在package.json中新增overrides配置强制锁定版本，避免依赖嵌套版本冲突：

{
  "overrides": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0"
  }
}

yarn/pnpm用户可以用resolutions字段实现相同效果。

• 第三步：配置Next.js编译规则
  在next.config.js中添加transpilePackages配置，将mui和emotion相关包加入编译列表：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@mui/material', '@mui/icons-material', '@emotion/react', '@emotion/styled']
}

module.exports = nextConfig

配置完成后重启项目即可正常运行。

内容的提问来源于stack exchange，提问作者Maha Waqar