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;