[BUG] - Tabs individual import error in server components

[grigorzyapkov]

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]

having the same issue

[Gascon1]

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]

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]

I have the same problem, any update?

[sadeq-qafari]

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]

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]

Same problem

[steebchen]

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.