导入Webpack构建的React库时出现Hooks调用报错求助

这个报错的核心问题是你的主应用和组件库加载了两个完全独立的React实例，导致Hooks的调用校验直接失效。具体说：

• 用Webpack打包UMD格式时，默认会把React这类依赖也打包进库文件里。但你的主应用本身也会加载自己的React，这就导致运行时存在两个React副本。Hooks的内部运行机制完全依赖当前组件所属的React实例的状态栈，跨实例调用Hook必然触发校验报错。
• React对Hooks的规则校验（比如必须在组件/自定义Hook体内调用），是靠内部的调用栈上下文来判断的。当组件库用的是自己打包的React，主应用用的是另一个，主应用的React根本认不出库内Hook的调用上下文，自然就抛出这个错误了。

• 改Webpack配置，把React和ReactDOM设为外部依赖（external），不让Webpack把它们打包进UMD库。这样组件库会直接复用主应用的React实例，配置示例：

  // webpack.config.js
  module.exports = {
    // 其他配置...
    externals: {
      react: 'react',
      'react-dom': 'react-dom'
    }
  };
  

• 把组件库package.json里的react和react-dom从dependencies移到peerDependencies里。这样包管理工具会提醒用户主应用需要安装兼容版本的React，避免重复安装。
• 确保主应用和组件库的React版本大版本一致，版本差异太大也可能导致内部机制不兼容，触发类似问题。

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