使用npm link引入自定义Antd组件库时出现useContext错误

核心问题根源 #

用npm link挂载本地库时，主项目和本地库会分别加载独立的React、Antd实例。Antd组件依赖自身创建的Context，主项目的Antd Context无法被本地库的Antd组件识别，导致Context获取为null，进而触发Cannot read properties of null (reading 'useContext')错误——哪怕是Spin、Button这类基础组件也会中招，因为它们都依赖Antd的全局Context。

具体解决方案 #

1. 调整本地库的依赖声明 #

把React、ReactDOM、Antd从本地库的dependencies移到peerDependencies，让本地库复用主项目的依赖实例：

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "antd": "^5.0.0"
  }
}

注：peerDependencies的作用是告诉包管理器，这个库依赖宿主项目已安装的指定版本依赖，不会自己单独安装。

2. 重新关联本地库 #

• 删除本地库的node_modules文件夹
• 执行npm install（此时peer依赖不会被安装，属于正常情况）
• 在本地库目录执行npm link，再到主项目目录执行npm link your-library-name

3. 强制主项目依赖统一（可选） #

如果上述步骤无效，可在主项目的package.json中添加强制依赖版本的配置：

• 若使用npm 8+，添加overrides：

"overrides": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "antd": "^5.0.0"
}

• 若使用yarn，添加resolutions：

"resolutions": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "antd": "^5.0.0"
}

然后执行npm install或yarn install更新依赖。

4. 自定义webpack配置的额外处理（如果适用） #

如果主项目用自定义webpack配置，需在resolve.alias中指定React和Antd的路径，强制使用主项目的实例：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
      'antd': path.resolve(__dirname, 'node_modules/antd')
    }
  }
}

验证方式 #

在主项目中打印实例一致性，确认问题是否解决：

import React from 'react';
import { YourCustomButton } from 'your-library-name';
import { Button as AntdButton } from 'antd';

// 检查React实例是否一致
console.log(React === YourCustomButton.__proto__.React);
// 检查Antd组件实例是否一致
console.log(AntdButton === YourCustomButton.AntdButton);

如果两个输出都是true，说明依赖实例已经统一，错误应该消失。

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