Why can't I use antd in my component-library

Viewed 65

I created a React component-libray using vite with simple components and it works as expected. I can publish it and link it to other projects.

The problem happens when I add antd and use its components as I start getting issues related to:

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

Here is the full stack trace:

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)

and here's my 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",
      },
    },
  },
})

and 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"
  }
}

and here's the Button component:

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

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

export default CustomButton;
0 Answers
Related