nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
20.42k stars 1.23k forks source link

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

Open hkbertoson opened 9 months ago

hkbertoson commented 9 months ago

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 commented 9 months ago

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

gumybit commented 9 months ago

Same here.

"@nextui-org/accordion": "^2.0.22",
"@nextui-org/system": "^2.0.5",
"@nextui-org/theme": "^2.1.3",
jrgarciadev commented 9 months ago

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

CracKerMe commented 5 months ago

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

"use client";

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


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

soupaulosilva commented 1 month ago

@CracKerMe thanks. your solution fixed the error

adil19971997 commented 5 days ago

@CracKerMe ありがとう