npm Workspace中useContext失效求助：跨包自定义Hook无法获取Context

问题本质 #

不是useContext不能在外部包中使用，核心问题出在Context实例不统一或React依赖重复安装，导致跨包调用时无法匹配到正确的Context Provider。

常见原因 #

1. React依赖重复：npm Workspace中如果子包（app和modules）各自安装了React，会导致两个包使用不同的React实例。Context与React实例绑定，跨实例调用useContext自然只能拿到默认值。
2. Context实例未共享：你在app中定义的Context，modules包没有导入同一个实例（比如手动复制了Context代码，或导入路径错误）。

解决步骤 #

1. 统一React依赖，消除重复实例

• 在根目录package.json中声明React、ReactDOM为公共依赖：

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

• 所有子包（app/application1、app/application2、modules）的package.json中，将React设为peerDependencies，并移除dependencies中的React：

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

• 执行npm install，确保所有子包都链接到根目录的React依赖。

2. 正确共享Context实例

推荐将通用Context移到modules包中，让所有app共享同一个实例：

• 在modules/src/contexts/MyAppContext.js中定义Context：

  import { createContext } from 'react';
  
  export const MyAppContext = createContext('default_value');
  

• 在app的应用中导入并提供Provider：

  import { MyAppContext } from '@your-workspace/modules';
  
  function App() {
    return (
      <MyAppContext.Provider value="actual_context_value">
        {/* 应用组件 */}
      </MyAppContext.Provider>
    );
  }
  

• modules包的自定义Hook中直接导入该Context：

  import { useContext } from 'react';
  import { MyAppContext } from '../contexts/MyAppContext';
  
  export function useMyAppContext() {
    return useContext(MyAppContext);
  }
  

如果必须在app中定义Context，可通过workspace别名让modules导入同一个实例：

• 在app/application1/package.json中设置包名（如@your-workspace/app1），然后在modules中导入：

  import { MyAppContext } from '@your-workspace/app1';
  

3. 检查导入路径与包别名

确保所有子包使用统一的workspace包名（如@your-workspace/modules）导入依赖，避免使用相对路径导致的实例不一致。

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