Monorepo外部包中Zustand Store无法正常使用问题求助

核心问题是Monorepo环境下，共享包与主应用的React/Zustand实例不共享，导致React Hook校验机制失效（Hook必须在同一React实例的组件上下文内调用），非Hook的getState方法不受此限制，因此可以正常运行。

解决方案步骤 #

1. 锁定依赖版本并统一实例 #

在Monorepo根目录的package.json中添加版本锁定配置，强制所有包使用同一版本的React、ReactDOM和Zustand：

• 对于npm（>=8.3），使用overrides：

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

• 对于Yarn，使用resolutions：

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

执行清理与重新安装命令，确保依赖被提升到根目录：

lerna clean
lerna bootstrap --hoist

2. 配置Vite强制依赖解析路径 #

在主应用的vite.config.ts中添加别名配置，让共享包直接引用主应用的React/Zustand实例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
      'zustand': path.resolve(__dirname, './node_modules/zustand'),
    },
  },
});

3. 检查共享包的依赖配置 #

确保共享包的package.json中，React和Zustand仅存在于peerDependencies（声明依赖要求）和devDependencies（开发时使用），不要放在dependencies中：

{
  "name": "@your-shared/store",
  "peerDependencies": {
    "react": "^18.0.0",
    "zustand": "^4.0.0"
  },
  "devDependencies": {
    "react": "^18.2.0",
    "@types/react": "^18.2.0",
    "zustand": "^4.4.7",
    "@types/node": "^20.0.0"
  }
}

4. 验证依赖实例唯一性 #

在主应用和共享包的代码中分别添加以下代码，验证是否引用了同一React实例：

// 主应用中
console.log('Main App React:', require('react'));
// 共享包中
console.log('Shared Package React:', require('react'));

如果输出的对象引用一致，说明问题解决；若不一致，需再次清理所有node_modules并重新执行lerna bootstrap --hoist。

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