[BUG] - Uncaught TypeError: type.getCollectionNode is not a function when using `DropdownSection` in NextUI with a custom component

anandhibare commented 2 months ago

NextUI Version

2.4.6

Describe the bug

I'm new to React and am using the NextUI library for my project. I want to create a custom function component, ProfDropdownItem, to render multiple DropdownSection components within a DropdownMenu. However, I'm encountering an error:

Uncaught TypeError: type.getCollectionNode is not a function

Here’s the code that is causing the issue:

import React from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Avatar } from '@nextui-org/react';

const ProfDropdownItem = () => {
  return (
    <DropdownSection title="Actions" showDivider>
      <DropdownItem key="new" shortcut="⌘N" description="Create a new file">
        New file
      </DropdownItem>
      <DropdownItem key="copy" shortcut="⌘C" description="Copy the file link">
        Copy link
      </DropdownItem>
      <DropdownItem
        key="edit"
        shortcut="⌘⇧E"
        description="Allows you to edit the file"
      >
        Edit file
      </DropdownItem>
    </DropdownSection>
  );
};

const SetDropdownItem = () => {
  return (
    <DropdownSection title="Settings" showDivider>
      <DropdownItem
        key="preferences"
        shortcut="⌘P"
        description="Open the preferences"
      >
        Preferences
      </DropdownItem>
      <DropdownItem key="Theme" shortcut="⌘T" description="Change the theme">
        Theme
      </DropdownItem>
      <DropdownItem
        key="privacy"
        shortcut="⌘⇧W"
        description="Privacy settings"
      >
        Privacy
      </DropdownItem>
    </DropdownSection>
  );
};

const TopBar = () => {
  return (
    <Dropdown placement="bottom-end">
      <DropdownTrigger>
        <Avatar
          isBordered
          as="button"
          className="transition-transform"
          color="secondary"
          name="User Name"
          size="sm"
          src="profilePhotoURL"
        />
      </DropdownTrigger>
      <DropdownMenu aria-label="Profile Actions" variant="flat">
        <ProfDropdownItem />
        <SetDropdownItem />
        {/* There are more sections to add dynamically ..*/}

      </DropdownMenu>
    </Dropdown>
  );
};

export default TopBar;

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a React project using Vite.
Install NextUI and Tailwind.
Ensure all components (DropdownSection, DropdownItem, DropdownMenu, DropdownTrigger, Dropdown) are imported correctly from @nextui-org/react.
Run the code, and the error occurs.

Dependencies:

@nextui-org/react": "^2.4.6",
framer-motion: "^11.3.31",
react: "^18.3.1",
react-dom: "^18.3.1",
use-dark-mode: "^2.3.1"

Expected behavior

The sections should be rendered inside the DropdownMenu dynamically if I wish to use some conditional logic to get a customized dropdown for a specific user.