search

nextui-org / nextui

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

[BUG] - Tabs individual import error in server components #2320

Open grigorzyapkov opened 9 months ago

grigorzyapkov commented 9 months ago

NextUI Version

2.2.9

Describe the bug

Individually import Tabs component in a server side component causes an error.

import { Tab, Tabs } from '@nextui-org/tabs'

Uncaught Error: Unknown element <[object Object]> in collection.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Create server side component
  2. import { Tab, Tabs } from '@nextui-org/tabs'
  3. Expect an error: Uncaught Error: Unknown element <[object Object]> in collection.

Expected behavior

Should not throw an error.

Screenshots or Videos

No response

Operating System Version

any

Browser

Chrome

alexander-densley commented 9 months ago

having the same issue

Gascon1 commented 8 months ago

Also having the same issue. I've noticed that this does not happen if used in a client component, but I don't see why this component would be client side only.

LukerSpringtree commented 8 months ago

I have the same issue!!! This is the first time I use nextui. And the error information is hard to read and understand!

sadeq-qafari commented 8 months ago

I have the same problem, any update?

sadeq-qafari commented 8 months ago

I have the same problem, any update?

add "use client" at the header of the file. the problem will be resolved.

Im aware of this solution, I want tabs to work in server side component.

AveshLutchman commented 8 months ago

See: https://github.com/nextui-org/nextui/issues/1403

This issue has been here for a while now. They're waiting for the next react-aria update to address it.

HomerDoh commented 6 months ago

Same problem

steebchen commented 5 months ago

It would be great if server components could be supported. Of course 'use client' makes the error go away, but that basically prevents all of the contents not being rendered at all on the server, so crawlers will not see this content unless they use JS rendering.

Yusuf-96 commented 1 month ago

I got this error when using Tabs component in Next js version 14.2.13 even mark the component as client still does not work ⨯ Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of from render. Or maybe you meant to call this function rather than return it. <... aria-label=... items={[...]} children={function children}>