Performance pitfall - imports not tree shaken

[timthedev07]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. Import a single component from any page in Next.js
2. Use the Next.js bundle analyzer to open up the tree diagram
3. Find the page used in step 1 and look for Flowbite react

Current behavior

All components are imported.

Expected behavior

Only the desired component should show up.

Context

[rluders]

Hey, @timthedev07, thanks for reporting it. It would require some changes to the library export. Feel free to do it if someone is interested in working on this.

BTW, this is something that we already knew, but good to have it as a reported issue so we can track it.

Ideally, I would expect to have something like:

import Button, { ButtonTheme, ButtonProps } from 'flowbite-react/components/button';

[tulup-conner]

Is this still an issue if you add optimizePackageImports: ["flowbite-react"]?

[ddiasfront]

import { accordionTheme } from './components/Accordion/theme';
import { alertTheme } from './components/Alert/theme';
import { avatarTheme } from './components/Avatar/theme';
import { badgeTheme } from './components/Badge/theme';
import { blockquoteTheme } from './components/Blockquote/theme';
import { breadcrumbTheme } from './components/Breadcrumb/theme';
import { buttonGroupTheme, buttonTheme } from './components/Button/theme';
import { cardTheme } from './components/Card/theme';
import { carouselTheme } from './components/Carousel/theme';
import { checkboxTheme } from './components/Checkbox/theme';
import { darkThemeToggleTheme } from './components/DarkThemeToggle/theme';
import { datePickerTheme } from './components/Datepicker/theme';
import { dropdownTheme } from './components/Dropdown/theme';
import { fileInputTheme } from './components/FileInput/theme';
import { floatingLabelTheme } from './components/FloatingLabel/theme';
import { footerTheme } from './components/Footer/theme';
import { helperTextTheme } from './components/HelperText/theme';
import { kbdTheme } from './components/Kbd/theme';
import { labelTheme } from './components/Label/theme';
import { listTheme } from './components/List/theme';
import { listGroupTheme } from './components/ListGroup/theme';
import { modalTheme } from './components/Modal/theme';
import { navbarTheme } from './components/Navbar/theme';
import { paginationTheme } from './components/Pagination/theme';
import { progressTheme } from './components/Progress/theme';
import { radioTheme } from './components/Radio/theme';
import { rangeSliderTheme } from './components/RangeSlider/theme';
import { ratingAdvancedTheme, ratingTheme } from './components/Rating/theme';
import { selectTheme } from './components/Select/theme';
import { sidebarTheme } from './components/Sidebar/theme';
import { spinnerTheme } from './components/Spinner/theme';
import { tableTheme } from './components/Table/theme';
import { tabTheme } from './components/Tabs/theme';
import { textInputTheme } from './components/TextInput/theme';
import { textareaTheme } from './components/Textarea/theme';
import { timelineTheme } from './components/Timeline/theme';
import { toastTheme } from './components/Toast/theme';
import { toggleSwitchTheme } from './components/ToggleSwitch/theme';
import { tooltipTheme } from './components/Tooltip/theme';
export const theme = {
    accordion: accordionTheme,
    alert: alertTheme,
    avatar: avatarTheme,
    badge: badgeTheme,
    blockquote: blockquoteTheme,
    breadcrumb: breadcrumbTheme,
    button: buttonTheme,
    buttonGroup: buttonGroupTheme,
    card: cardTheme,
    carousel: carouselTheme,
    checkbox: checkboxTheme,
    datepicker: datePickerTheme,
    darkThemeToggle: darkThemeToggleTheme,
    dropdown: dropdownTheme,
    fileInput: fileInputTheme,
    floatingLabel: floatingLabelTheme,
    footer: footerTheme,
    helperText: helperTextTheme,
    kbd: kbdTheme,
    label: labelTheme,
    listGroup: listGroupTheme,
    list: listTheme,
    modal: modalTheme,
    navbar: navbarTheme,
    pagination: paginationTheme,
    progress: progressTheme,
    radio: radioTheme,
    rangeSlider: rangeSliderTheme,
    rating: ratingTheme,
    ratingAdvanced: ratingAdvancedTheme,
    select: selectTheme,
    textInput: textInputTheme,
    textarea: textareaTheme,
    toggleSwitch: toggleSwitchTheme,
    sidebar: sidebarTheme,
    spinner: spinnerTheme,
    table: tableTheme,
    tabs: tabTheme,
    timeline: timelineTheme,
    toast: toastTheme,
    tooltip: tooltipTheme,
};

First thing I've noticed is that the theme file might be something to be reviewed, I'm not sure if it is affecting the other components exports, but, definitely would take a look into separating the themes exports/imports into separated files.

[ddiasfront]

I'll try to dig into the cause of the components tree shaking as well.

[ddiasfront]

Glad to share I'm making some progress on it.

[Stupidism]

Excited to see this coming!

[MiroslavPetrik]

Are you able to build the next.js project with the flowbite-react as dependency? Mine fails... https://github.com/themesberg/flowbite-react/issues/1285 Perhaps some components when used crash it.

[SutuSebastian]

Fixed in https://github.com/themesberg/flowbite-react/pull/1264, u can now import components just like @rluders was suggesting earlier, eg:

import { Button, ButtonProps, FlowbiteButtonTheme } from "flowbite-react/components/Button";