外部包中React Context状态无法持久化问题：内部Auth SDK配置后状态未同步更新

看起来你遇到的核心问题是Monorepo环境下多个React实例导致的Context状态隔离——你的SDK和主应用可能各自使用了独立的React副本，使得状态更新无法在两者之间同步。下面是一步步的修复方案：

1. 清理SDK的React依赖配置 #

首先，确保SDK的package.json中，React只作为peerDependencies存在，避免安装独立副本：

修改后的package.json关键部分：

{
  "devDependencies": {
    "@types/node": "^25.3.1",
    "@types/react": "^18.3.28",
    "@types/react-dom": "^18.3.7",
    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
    "@vitejs/plugin-react-swc": "^3.11.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "typescript": "^5.9.2",
    "vite": "^5.4.21",
    "vite-plugin-dts": "^3.9.1"
  },
  "dependencies": {
    "react-cookie": "^8.0.1"
  },
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "peerDependenciesMeta": {
    "react": { "optional": false },
    "react-dom": { "optional": false }
  }
}

• 移除devDependencies中的react和react-dom，只保留类型定义
• 新增react-dom到peerDependencies，确保主应用提供完整的React环境
• 添加peerDependenciesMeta明确依赖是必须的

2. 调整Vite配置，确保React完全外部化 #

更新你的vite.config.ts，确保所有React相关依赖都被标记为外部依赖，不会被打包进SDK：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import dts from 'vite-plugin-dts'
import external from 'rollup-plugin-peer-deps-external'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '!': path.resolve(__dirname, './src'),
    },
  },
  build: {
    sourcemap: true,
    lib: {
      entry: 'src/index.ts',
      name: 'anonymized-package-name',
      formats: ['es'],
    },
    rollupOptions: {
      // 外部化所有peer依赖和React相关包
      external: ['react', 'react-dom', 'react-cookie']
    }
  },
  plugins: [react({}), dts(), external()],
})

• 把react-cookie也加入external，因为它依赖React，由主应用提供更符合peer依赖规范

3. 确保Monorepo依赖共享 #

在你的Monorepo根目录的pnpm-workspace.yaml中，确保SDK和主应用都被包含：

packages:
  - "packages/*" # 你的SDK所在目录
  - "apps/*" # 主应用所在目录

然后在SDK目录执行pnpm install，确保它链接到主应用的React实例，而不是安装自己的副本。

4. 重新构建并测试 #

• 执行pnpm build重新构建SDK
• 重启主应用的开发服务器
• 再次调用configure方法，检查useEffect中的console.log(exampleValue)是否能打印出更新后的值，startLogin是否还会抛出错误

为什么会出现这个问题？ #

当你的SDK和主应用各自安装了React实例时，React.createContext在两个实例中创建的是完全独立的上下文对象。主应用调用configure时，实际上是在SDK的React实例的上下文中更新了状态，但主应用的组件（包括useEffect和useAuth获取的回调）使用的是主应用自己的React实例的上下文，所以始终只能拿到初始状态值。

通过将React设为peer依赖并确保外部化，你强制SDK使用主应用提供的单一React实例，这样Context状态就能在整个应用中正确同步了。

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