构建React/TypeScript库时触发Invalid hook call错误求助

这个错误的核心原因是运行时存在多个React实例：你的库在引入@fluentui/react组件后，打包过程中把React（或依赖React的fluentui代码）一起打包进了库产物，导致宿主项目同时加载了库内的React和自身的React实例。而Hook必须在同一React实例的上下文里运行，因此触发了错误。简单组件没有引入外部依赖，复用了宿主的React实例，所以能正常工作。

解决方案： #

1. 调整Rollup配置，标记React及相关依赖为外部资源

在rollup.config.js中，将React、ReactDOM以及@fluentui/react相关包设置为external，告诉Rollup不要把这些依赖打包进库产物，而是由宿主项目提供：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [resolve(), commonjs(), typescript()],
  // 标记外部依赖，根据实际使用的fluentui子包调整
  external: ['react', 'react-dom', '@fluentui/react', '@fluentui/react-components']
};

2. 规范package.json的依赖声明

• 将React、ReactDOM、@fluentui/react仅放在peerDependencies和devDependencies中，绝对不要放到dependencies：

{
  "name": "infosysta-typescript-core",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@fluentui/react": "^8.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@fluentui/react": "^8.0.0",
    "rollup": "^3.0.0",
    "@rollup/plugin-typescript": "^11.0.0"
    // 其他开发依赖...
  }
}

这样能避免库安装时将这些依赖打包进自身的node_modules，确保运行时复用宿主的实例。

3. 验证宿主项目的依赖安装

宿主项目需要确保已安装所有声明的peer依赖，npm 7+会自动安装peer依赖，也可以手动执行：

npm install react react-dom @fluentui/react

4. 检查实例唯一性

在库项目和宿主项目中分别执行以下命令，确认只有一个React实例：

npm ls react

如果出现多个React版本或路径，说明依赖重复，需要清理node_modules后重新安装。

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