[BUG] - Accordion has issue "Error: Unknown element <[object Object]> in collection."

[hkbertoson]

NextUI Version

2.1.12

Describe the bug

When creating an accordion like this

import React from "react";
import {Accordion, AccordionItem} from "@nextui-org/accordion";

export default function App() {
const defaultContent =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  return (
    <Accordion>
      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
        {defaultContent}
      </AccordionItem>
      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
        {defaultContent}
      </AccordionItem>
      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
        {defaultContent}
      </AccordionItem>
    </Accordion>
  );
}

I get the error Error: Unknown element <[object Object]> in collection.

Your Example Website or App

https://codesandbox.io/p/sandbox/fervent-firefly-vwvqc9

Steps to Reproduce the Bug or Issue

Create a page using the Accordion Component.

Expected behavior

https://nextui.org/docs/components/accordion

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[computabeast]

I also have experienced this error. Copy and pasted the code exactly from the documentation.

[gumybit]

Same here.

"@nextui-org/accordion": "^2.0.22",
"@nextui-org/system": "^2.0.5",
"@nextui-org/theme": "^2.1.3",

[jrgarciadev]

Guys, please check this comment: https://github.com/nextui-org/nextui/issues/1403#issuecomment-1678863519

[CracKerMe]

这是一个服务器组件，在引用的组件上方 增加

"use client";

表达这是一个客户端渲染组件。

---

在早前的版本中 会提示仅可在client 中使用，不知道为何 这个友好的提醒消失了

[soupaulosilva]

@CracKerMe thanks. your solution fixed the error

[adil19971997]

@CracKerMe ありがとう

[ChandanVasu]

"use client"

Work

[alwaisy]

Two reasons why this error came.

• No use client pragma usage
• Wrong imports

The wrong imports depend on how you installed Nextui in the project. Module/component wise of globally. For example in the module case

Correct

import { Avatar } from "@nextui-org/avatar";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@nextui-org/dropdown";

wrong

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