Monorepo中React共享库含node_modules时触发useContext空值读取错误

这个错误的核心是React或MUI在主应用和共享组件库中被加载了两份独立实例，导致Context无法跨实例传递，最终抛出Cannot read properties of null (reading 'useContext')。以下是针对性的解决步骤：

1. 强化Rollup打包配置，彻底排除peer依赖 #

虽然你已经用了peerDepsExternal插件，但可能存在配置遗漏，需要确保Rollup完全不打包React、MUI及相关依赖，只输出组件代码：

// rollup.config.js
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true },
    { file: 'dist/index.esm.js', format: 'esm', sourcemap: true }
  ],
  plugins: [
    // 必须放在插件列表最前面，确保所有peer依赖被排除
    peerDepsExternal(),
    resolve({
      // 强制共享库使用主应用的React/MUI实例，禁止读取自身node_modules中的副本
      dedupe: ['react', 'react-dom', '@mui/material', '@mui/system', '@emotion/react', '@emotion/styled']
    }),
    commonjs(),
    babel({ exclude: 'node_modules/**', presets: ['@babel/preset-react'] })
  ],
  // 手动声明外部依赖，兜底避免意外打包
  external: ['react', 'react-dom', '@mui/material', '@mui/system', '@emotion/react', '@emotion/styled']
};

2. 主应用配置强制复用同一依赖实例 #

根据主应用的构建工具，配置依赖别名，强制让共享库导入的React/MUI指向主应用的node_modules：

若使用Webpack（Create React App需用craco或react-app-rewired） #

// craco.config.js 或自定义webpack配置文件
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
      '@mui/material': path.resolve(__dirname, 'node_modules/@mui/material'),
      '@emotion/react': path.resolve(__dirname, 'node_modules/@emotion/react'),
      '@emotion/styled': path.resolve(__dirname, 'node_modules/@emotion/styled')
    }
  }
};

若使用Vite #

// vite.config.js
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'),
      '@mui/material': path.resolve(__dirname, 'node_modules/@mui/material'),
      '@emotion/react': path.resolve(__dirname, 'node_modules/@emotion/react'),
      '@emotion/styled': path.resolve(__dirname, 'node_modules/@emotion/styled')
    }
  }
});

3. Monorepo依赖共享优化（推荐） #

如果你的项目是标准Monorepo结构，直接启用包管理器的workspaces功能，让React/MUI在根目录只安装一次，主应用和共享库共用同一实例：

在根目录的package.json中添加：

{
  "workspaces": [
    "packages/main-app",
    "packages/shared-lib"
  ]
}

然后在根目录执行npm install/pnpm install/yarn install，即可自动共享依赖，避免多份实例问题。

4. 验证修复效果 #

启动主应用后，在浏览器控制台执行以下代码，确认React实例唯一：

// 打印主应用的React实例
console.log(window.React);
// 打印共享库导入的React实例
import React from 'react';
console.log(React);
// 两者必须完全相等
console.log(window.React === React); // 输出true则说明修复成功

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