为何MUI Joy Autocomplete导致Next.js+TypeScript项目构建崩溃？

问题概况 #

• 已弃用并替换MUI Joy的Autocomplete组件，但Next.js构建仍报错，提示无法找到@popperjs/core的./dom-utils/getCompositeRect.js文件
• 错误依赖链：@popperjs/core/lib/index.js → @mui/base/Popper → @mui/joy/Autocomplete → 项目组件文件
• 检查发现node_modules/@popperjs/core/lib目录下缺少声明文件中引用的modifiers、utils目录及对应文件

解决步骤 #

1. 重装依赖修复文件缺失 #

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 清除npm缓存
npm cache clean --force
# 重新安装依赖
npm install

依赖安装不完整或缓存损坏是这类问题的常见原因，重装能快速修复多数文件缺失问题。

2. 排查间接依赖并升级MUI包 #

先查看哪些包还在引用@popperjs/core：

npm ls @popperjs/core

如果是MUI相关组件间接依赖，升级到兼容版本：

npm update @mui/joy @mui/base

3. 强制指定@popperjs/core稳定版本 #

在package.json中添加overrides字段锁定版本：

{
  "overrides": {
    "@popperjs/core": "^2.11.8"
  }
}

添加后重新执行npm install，确保安装完整的稳定版。

4. 清除Next.js构建缓存 #

npx next clean

Next.js的缓存可能保留旧的依赖引用，清除后重新构建项目。

5. 彻底移除Autocomplete相关引用 #

检查项目中的导出文件（如components/index.ts）及所有组件代码，确保没有隐式导入或残留的@mui/joy/Autocomplete引用，彻底删除相关代码。

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