NX Monorepo中Next.js使用Jotai时触发Invalid hook call错误求助

问题现象 #

在NX工作区搭建的Next.js应用中，引入Jotai（或其他React状态管理库）并使用其Provider组件后，启动应用时出现以下异常：

• 浏览器显示服务器错误：TypeError: Cannot read properties of null (reading 'useRef')
• 服务器日志抛出Invalid hook call警告，提示Hook调用违反规则，可能原因包括React版本不匹配、违反Hook规则或存在多份React副本

根本原因 #

核心问题是同一应用中存在多份React实例：
当在工作区根目录通过yarn add jotai -W安装依赖时，Jotai会引用根目录node_modules中的React；而Next.js子应用（apps/web-app）自身的依赖树中也包含一份React，导致Jotai使用的React与应用组件使用的React不是同一个实例，触发Hook调用的校验失败。

解决方案 #

方案1：统一工作区React依赖 #

将React、React DOM升级为工作区共享依赖，确保所有子应用使用同一实例：

1. 在工作区根目录执行：

yarn add react react-dom -W

2. 删除子应用apps/web-app下的node_modules和本地yarn.lock（若存在）
3. 回到根目录执行yarn install，重新安装依赖

方案2：配置NX强制共享根依赖 #

修改根目录的nx.json，添加workspaceDependencies配置，指定共享核心依赖：

{
  // 保留原有配置...
  "workspaceDependencies": ["react", "react-dom"]
}

执行yarn install后重启应用即可。

方案3：子应用单独安装状态管理库 #

放弃根目录安装，直接在子应用内安装Jotai，确保它引用子应用自身的React实例：

cd apps/web-app
yarn add jotai

验证方式 #

执行以下命令检查React依赖实例数量：

yarn why react

若输出仅显示根目录下的React实例，说明问题已解决；若存在多个路径的React，需重新检查依赖配置。

补充说明 #

生成Next应用时出现的webpack、babel peer依赖警告与本次Hook错误无关，属于NX内部依赖版本不兼容提示，不影响应用功能，可忽略。

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