React组件包引入后出现Invalid hook call及useMemo错误求助

• 核心原因：这类错误几乎都是React多实例冲突导致——组件包与宿主项目各自加载了独立的React/ReactDOM实例，而React Hook要求必须在同一实例的组件树中执行。

• 排查与修复步骤：

  1. 修正package.json依赖配置
     把react、react-dom、react-bootstrap从dependencies移到peerDependencies，同时在devDependencies保留一份用于开发构建：

     {
       "name": "Formcomponent",
       "peerDependencies": {
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-bootstrap": "^2.0.0"
       },
       "devDependencies": {
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-bootstrap": "^2.0.0"
         // 其他开发依赖如typescript、构建工具等
       }
     }
     

     这样组件包会复用宿主项目的React实例，避免重复加载。

  2. 调整构建工具的外部依赖配置
     确保构建时不把react、react-dom、react-bootstrap打包进dist文件，以Rollup为例：

     export default {
       input: 'src/index.tsx',
       external: ['react', 'react-dom', 'react-bootstrap'], // 标记为外部依赖
       output: {
         file: 'dist/index.js',
         format: 'umd',
         globals: { // 全局变量映射，供UMD格式使用
           react: 'React',
           'react-dom': 'ReactDOM',
           'react-bootstrap': 'ReactBootstrap'
         }
       }
     }
     

     Vite用户可在vite.config.js的rollupOptions中添加同样的external配置。

  3. 解决本地链接的依赖冲突
     如果用npm link/yarn link调试组件包，需手动让组件包使用宿主项目的React：

     # 进入组件包目录，执行以下命令
     npm link ../宿主项目路径/node_modules/react
     npm link ../宿主项目路径/node_modules/react-dom
     npm link ../宿主项目路径/node_modules/react-bootstrap
     

  4. 检查构建产物
     打开dist/index.js，如果发现代码中包含import React from 'react'或require('react')，说明外部依赖配置未生效，需重新调整构建工具设置。

  5. 验证版本兼容性
     确保组件包与宿主项目的React、react-bootstrap版本范围一致，避免因版本差异导致Hook运行异常。

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