Search code examples
reactjscreate-react-appantddestructuring

How to import Ant design on demand to work with components which does destructuring?

I'm importing antd components on demand in my create-react-app project such as Collapse, Tabs, Select, etc which do some destructure such as:

import { Tabs } from "antd/lib/tabs";
import 'antd/lib/tabs/style/css';
import { Collapse } from "antd/lib/collapse";
import 'antd/lib/collapse/style/css';
import { Select } from "antd/lib/select";
import 'antd/lib/select/style/css';

const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;

I'm getting error TypeError: Cannot destructure property 'Panel' of 'antd_lib_collapse__WEBPACK_IMPORTED_MODULE_3__.Collapse' as it is undefined.
I don't want to use import { Collapse, Select } from "antd"; as it brings a large amount of javascript with it. What am I doing wrong?

Solution

  • One needs to import import Tabs from "antd/lib/tabs"; in such a manner.