Next.js报错Module not found:无法解析@react-stately/collections

这个报错本质是跨包依赖版本冲突，和本地缓存、编辑器状态、设备重启没有关系：

• 安装react-use时，包内依赖的高版本React Aria生态包（@react-stately/*、@react-aria/*系列）会被npm做版本提升，安装到项目顶层node_modules目录。
• 你使用的@nextui-org/react@1.0.0-beta.9属于v1测试分支，内部锁定了低版本的React Aria依赖，且没有把这类包声明为可兼容提升的peer依赖，运行时找不到对应低版本的文件就会抛出模块不存在的错误。
• 手动安装单个缺失包只会触发新的版本不匹配，才会出现补完一个包又报另一个包缺失的连环报错；删除依赖目录、锁文件重装的操作没有解决版本范围不兼容的核心问题，自然不会生效。

按生效成本从低到高排序：

方案1：强制锁定冲突依赖版本（零业务代码改动，最快修复） #

npm 8.3及以上版本支持overrides配置，可以强制全项目使用NextUI兼容的React Aria包版本，阻断依赖提升带来的冲突，直接在项目根目录的package.json中添加如下字段：

{
  "overrides": {
    "@react-stately/collections": "3.4.0",
    "@react-stately/menu": "3.2.3",
    "@react-stately/selection": "3.5.1",
    "@react-aria/visually-hidden": "3.2.3",
    "@react-aria/interactions": "3.8.0",
    "@react-aria/ssr": "3.1.0"
  }
}

配置完成后执行以下命令重装依赖即可：

# 删原有依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install

如果你用yarn作为包管理工具，把上面的overrides字段名换成resolutions即可；pnpm用户把配置写到pnpm.overrides字段下。

方案2：替换存在依赖问题的工具包 #

react-use已经超过2年没有发布大版本更新，内部依赖的版本声明存在较多兼容问题，如果方案1配置后还有偶发报错，可以直接把react-use替换为维护更活跃、依赖声明更规范的同功能库@react-hookz/web，两者API重合度超过90%，替换成本极低，且不会引入冲突的React Aria系列依赖。

方案3：升级NextUI到v2正式版 #

如果项目还在开发初期，没有大量耦合NextUI v1的自定义逻辑，可以直接把NextUI升级到v2正式版本。v2版本已经修正了所有依赖声明问题，把React Aria相关包做了正确的peer依赖配置，和主流React工具库的兼容问题已经全部修复，不会再出现这类连环缺包报错。

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