@headlessui/react not working with Next.Js 13

[a-essawy]

After upgrading to next.js 13 with the new app directory. I got this error.

./node_modules/@headlessui/react/dist/components/combobox/combobox.js

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

Error in terminal

Error in localhost

if i typed "use client" at app/page.jsx it works fine, but that removes the serves-side rendering feature.

any thought?

thank you.

[hmaiermack]

The solution is right there in the error: Combobox doesn't support SSR as it has useEffect as a dependency. I'd just define your component with use client at the lowest level possible in your component tree.

[a-essawy]

Yes, I was hoping for another solution other than the one in the error.
Because that's means wherever I use headlessui, that means that component can't be SSR, which is the new default way of component rendering in Next 13.

[Evavic44]

Just create a separate .js file for the headless UI component and define the "use client" flag there and you can import it into any server component without it throwing any errors.