React组件库安装后setTimeout触发Invalid hook call错误求助

根因定位 #

• 你的组件代码完全符合Hook使用规则：setTimeout内调用的是useState返回的状态更新函数，并非直接调用Hook，不存在规则违规问题，无需在该方向排查
• 已确认React、ReactDOM版本两边完全匹配，排除版本不兼容问题
• 报错100%由同应用内存在多份React副本导致

解决方案 #

第一步：修复组件库依赖配置

确保你的组件库package.json中，react、react-dom只出现在devDependencies和peerDependencies中，绝对不要加入dependencies：

{
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

该配置会告知npm安装组件库时，不会主动为组件库单独安装React，只会复用业务项目的React依赖。

第二步：修复externals配置，解决require is not defined报错

你的externals配置只声明了排除React，但没有匹配输出模块格式，才会触发require未定义错误。根据你使用的打包工具（以webpack为例），补充对应配置：

// webpack.config.js
module.exports = {
  output: {
    // 配置为commonjs2格式，适配绝大多数React业务项目的模块系统
    libraryTarget: 'commonjs2'
  },
  externals: {
    // 明确指定用commonjs方式引入外部React
    'react': 'commonjs react',
    'react-dom': 'commonjs react-dom'
  }
}

如果需要输出兼容多环境的umd格式包，externals改为如下配置即可：

externals: {
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    root: 'React'
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    root: 'ReactDOM'
  }
}

第三步：本地link调试场景额外处理

如果你是用npm link/yarn link的方式在本地调试组件库，需要额外做如下配置避免多副本：
在组件库目录下执行命令，指向业务项目的React依赖：

npm link ../你的业务项目目录/node_modules/react
npm link ../你的业务项目目录/node_modules/react-dom

验证方式 #

1. 组件库打包完成后，打开产物代码搜索React实现代码，没有搜索到完整React源码说明externals生效
2. 业务项目安装组件库后，执行npm ls react，依赖树中只出现一个版本的React即为配置成功

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