含React高阶组件与react-redux的库仅调用connect时出现Invalid hook call错误

问题根因定位 #

这个错误本质是react-redux的connect内部调用React Hooks时的上下文异常，90%以上的场景是依赖实例重复或HOC调用时机错误，排查步骤如下：

1. 排查依赖实例重复问题 #

你虽然配置了peerDependencies和externals，但以下场景依然会导致react/react-redux存在多个实例：

• 首先确认打包产物是否正确排除了公共依赖：
  用webpack-bundle-analyzer分析你的库打包产物，如果存在react/react-redux/redux的代码，说明externals配置未生效，需要检查webpack输出配置：
  • 若输出CommonJS模块，需设置output.libraryTarget: 'commonjs2'
  • 若输出UMD模块，需设置output.libraryTarget: 'umd' + output.globalObject: 'this'，确保externals的全局变量匹配逻辑正常
• 本地link场景的冗余依赖问题：
  你在库中把react-redux等列为devDependencies，执行npm install时这些依赖会被安装到库自身的node_modules目录下，link时库会优先加载自己目录下的依赖，导致和宿主应用的实例重复：
  • 临时方案：删除库目录node_modules下的react/react-dom/react-redux/redux文件夹
  • 永久方案：用yalc代替npm link做本地依赖测试，yalc会严格遵循peerDependencies规则，不会引入本地冗余依赖
• 确认宿主应用的依赖版本和库的peerDependencies要求的版本范围兼容，避免版本不兼容导致的内部API调用异常

2. 排查HOC调用姿势错误 #

connect内部基于Hooks实现，若你在React组件的渲染流程中动态调用ComponentBranch生成组件，会导致Hooks调用时机不符合React规则，触发报错：
错误示例（在组件内部生成HOC组件）：

const Page = () => {
  // 错误：每次组件渲染都会重新生成新的RenderTitle，导致Hooks调用时机异常
  const RenderTitle = ComponentBranch(() => true, PageTitleA, PageTitleB)
  return <RenderTitle sub="sub title here!" />
}

正确写法（在组件外部全局生成一次HOC组件）：

// 正确：全局仅生成一次组件，符合Hooks调用规则
const RenderTitle = ComponentBranch(() => true, PageTitleA, PageTitleB)
const Page = () => {
  return <RenderTitle sub="sub title here!" />
}

你可以先验证这个点，如果把HOC生成逻辑移到组件外部后报错消失，即可确认是调用姿势问题。

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