使用含useState的React库组件时触发'dispatcher.useState'空对象错误

错误原因 #

核心问题是组件库与主应用加载了两个独立的React实例：
虽然你已在组件库的peerDependencies声明了React依赖，但本地通过file:../lib-five引入组件库时，npm/yarn不会自动合并依赖，组件库devDependencies中安装的React会被主应用加载，与主应用自身的React形成两个独立实例。而React Hooks依赖单一实例的内部dispatcher上下文，多实例会导致hooks无法找到正确的运行环境，从而抛出该错误。

解决方案 #

方案1：让组件库共享主应用的React依赖 #

1. 在组件库目录下执行命令，绑定主应用的React实例：

# npm
npm link ../uselibtest/node_modules/react
npm link ../uselibtest/node_modules/react-dom

# yarn
yarn link ../uselibtest/node_modules/react
yarn link ../uselibtest/node_modules/react-dom

2. 重新构建组件库：

npm run build

3. 重启主应用开发服务。

方案2：强制所有依赖使用同一版本React #

在主应用的package.json中添加版本强制配置，确保所有嵌套依赖使用主应用指定的React版本：

npm用户：

{
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

yarn用户：

{
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

执行npm install或yarn install后，重启主应用服务。

额外优化：组件库TypeScript配置 #

确保组件库的tsconfig.json保留React的导入语句，不将其编译进产物：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "declaration": true,
    "outDir": "./dist/esm",
    "skipLibCheck": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

（根据组件库源码目录结构调整include字段）

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