React函数组件内Invalid Hook Call错误：Provider无法使用Hook

核心原因 #

你的独立认证包与主项目加载了两份不同的React实例，这是本地包开发（yarn link/Git直接安装）时触发Hook调用错误的最常见原因。React的Hook机制依赖单一React实例的内部状态，多实例会导致Hook无法被正确识别。

排查与验证 #

• 在主项目根目录执行yarn list react或npm ls react，查看输出是否包含多个React版本，重点检查你的认证包是否自带了独立的React依赖。
• 在UserProvider和主项目的App组件中分别添加console.log(React)，对比两者的内存地址：如果不一致，即可确认是多实例问题。

解决方案 #

1. 将React设为认证包的Peer依赖 #

修改认证包的package.json，把react和react-dom从dependencies移到peerDependencies，确保认证包复用主项目的React实例：

{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

• 删除认证包的node_modules和锁文件，重新执行yarn install或npm install。

2. 强制主项目使用单一React版本 #

如果无法修改认证包，可在主项目中强制统一React版本：

• Yarn：在主项目package.json中添加resolutions字段：

  "resolutions": {
    "react": "18.2.0", // 替换为你的主项目React版本
    "react-dom": "18.2.0"
  }
  

• npm 8+：在主项目package.json中添加overrides字段：

  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
  

添加后重新执行依赖安装命令。

3. 额外检查项 #

• 确保UserProvider是标准函数组件，未被当作普通函数调用（你的代码中<UserProvider>写法正确）。
• 确认主项目与认证包的React版本兼容，避免跨大版本（如16→18）的语法冲突。
• 清除依赖缓存：执行yarn cache clean或npm cache clean --force，再重新安装依赖。

验证 #

修改完成后重启项目，检查UserProvider内的useState、自定义Hook中的Hook是否能正常运行，Invalid Hook Call错误应该会消失。

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