在Vite构建的React组件库中使用Antd时出现useContext报错怎么办？

我用Vite创建了一个React组件库，简单组件能正常运行、发布并在其他项目中使用，但添加AntD并使用其组件时，出现以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'useContext')

完整栈追踪信息：

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.bt [as useContext] (comp-lib-temp.es.js?t=1661368167344:998:18)
    at GF (comp-lib-temp.es.js?t=1661368167344:25093:541)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)

vite.config.ts 配置 #

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/lib/index.ts"),
      name: "CompLibTemp",
      fileName: (format) => `comp-lib-temp.${format}.js`,
    },
  },
  // @ts-ignore
  rollupOptions: {
    external: ["react", "react-dom"],
    output: {
      globals: {
        react: "React",
        "react-dom": "ReactDOM",
      },
    },
  },
})

package.json 配置 #

{
  "name": "comp-lib-temp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "antd": "^4.22.7"
  },
  "devDependencies": {
    "@types/node": "^18.7.13",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.7"
  },
  "files": [
    "dist"
  ],
  "main": "./dist/comp-lib-temp.umd.js",
  "module": "./dist/comp-lib-temp.es.js",
  "exports": {
    ".": {
      "import": "./dist/comp-lib-temp.es.js",
      "require": "./dist/comp-lib-temp.umd.js"
    }
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

自定义Button组件代码 #

import React from 'react';
import {Button} from 'antd';

const CustomButton = ()=> <Button type="primary"> Hello Button </Button>

export default CustomButton;

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