Next.js项目已正确安装@rstfx-ui/reset-*系列依赖却仍报模块未找到错误

遇到这种明明依赖已经安装却提示找不到的问题，我在日常排查Next.js项目时碰到过好多次，大概率是缓存、依赖完整性或者配置层面的问题，给你一步步梳理排查和解决的方案：

• 彻底清除依赖缓存与重装
  首先最常见的就是缓存残留问题，先把旧的依赖包和锁文件清干净，再重新安装：

  rm -rf node_modules package-lock.json yarn.lock
  npm install # 如果你用yarn就换成 yarn install
  

  同时别忘了清除Next.js自身的构建缓存和Node的全局缓存：

  npx next clean
  npm cache clean --force
  

• 核查依赖的存在性与拼写
  打开项目根目录的package.json，确认@rstfx-ui/reset-dismissable-layer和@rstfx-ui/reset-dropdown-menu确实在dependencies或devDependencies列表里，版本号也没被意外修改。另外注意错误信息里的包名拼写（比如你提到的@rstfx-ui/res明显是截断了，要确认实际引用的包名完全正确，多一个少一个字符都会导致找不到）。

• 检查包的实际安装结构
  直接去node_modules/@rstfx-ui目录下看看，对应的reset-dismissable-layer和reset-dropdown-menu文件夹是否存在，进去后确认有没有入口文件（比如index.js），以及包内的package.json里的main或module字段是否指向了正确的文件。有时候包安装过程中可能损坏，或者包本身发布时就缺失了必要的入口配置。

• 排查Next.js的Webpack自定义配置
  如果你在next.config.js里自定义了Webpack配置，比如加了resolve.alias或者修改了modules选项，要检查这些配置是不是不小心把node_modules排除在了模块查找路径外，或者别名设置和这些包的路径冲突了。

• 重启并重新构建项目
  有时候开发服务器的热更新缓存会搞出奇怪的问题，先完全停止当前的dev服务，然后重新执行构建和启动命令：

  npm run build
  npm run dev
  

• 尝试切换包管理器
  如果你用的是pnpm，它的依赖隔离机制可能会导致Next.js无法找到某些模块，可以试试临时切换回npm或yarn重新安装依赖，看看问题是否消失。如果切换后正常了，那就是pnpm的hoisting配置需要调整。

内容来源于stack exchange