NextJS 13 getting an <[object Object]> error when trying to use Listbox from nextui

Question

I am attempting to use the nextui-org/react styling on my Next13 project. When I use the ListboxItem component, I get an <[Object Object]> error. If I print out a simple list it works just fine, or if I use a different nextui styling (chip) it works. Code below.

import React from 'react';
import { db } from '@/db';
import ListboxWrapper from '../common/ListboxWrapper';
import { Listbox, ListboxItem } from '@nextui-org/react';

type Props = {};

const TopicList = async (props: Props) => {
  const topics = await db.topic.findMany();

  console.log(topics);

  const items = topics.map(item => {
    return (
      <ListboxWrapper key={item.id}>
        <Listbox>
          <ListboxItem key={item.id}>{item.slug}</ListboxItem>
        </Listbox>
      </ListboxWrapper>
    );
  });

  return <div>{items};</div>;
};

export default TopicList;

Answer 1

I faced the same error as you with exactly the same code, actually the issue comes from the @nextui-org/listbox components that cannot be rendered server-side.

Thus add "use client"; at the top of your file to make it work.