使用npm workspaces+Vite/Rollup时生产构建出现React异常

问题本质 #

你的问题核心是共享包shared和主项目app存在多个React实例：

• 开发模式下Vite会自动复用根目录的React依赖，所以不会报错；
• 生产构建时，共享包如果把react声明为dependencies，会打包自己的React副本，而这个副本在生产优化过程中被处理为null，导致调用useState时触发Cannot read properties of null错误。

具体修复步骤 #

1. 修改共享包的依赖配置

打开packages/shared/package.json，将react/react-dom从dependencies移到peerDependencies，同时在devDependencies中保留一份用于本地开发：

{
  "name": "@my-app/shared",
  "version": "1.0.0",
  // 其他配置...
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
    // 其他开发依赖...
  }
}

peerDependencies的作用是告诉包管理器：共享包需要的React由宿主项目（也就是你的app）提供，不会自己打包独立的React副本。

2. 配置Vite强制统一React实例

打开packages/app/vite.config.js，添加resolve.alias和optimizeDeps配置，确保所有模块都使用同一个React实例：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react': require.resolve('react'),
      'react-dom': require.resolve('react-dom')
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      external: ['react', 'react-dom']
    }
  }
});

• resolve.alias强制所有引用react/react-dom的地方都指向根目录安装的同一个实例；
• optimizeDeps.esbuildOptions.external确保构建时不会把React打包进产物，完全复用宿主项目的React依赖。

3. 清理缓存并重新构建

执行以下命令清理旧构建产物并重新安装依赖：

rm -rf node_modules packages/*/node_modules
npm install
npx vite build --emptyOutDir

验证修复 #

重新执行vite build && vite preview，此时共享包的useDebounceValue Hook会正确复用主项目的React实例，不会再出现useState相关的报错。

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