How to use flowbite-react in React Server Components

[focux]

Describe the bug
There are some static components that should work on server components (Next.js 13), for instance, the avatar component—and many others—but for some reason is throwing the error below that seems to be coming from floating-ui:

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

   ,----
 5 | import { createPortal, flushSync } from 'react-dom';
   :                        ^^^^^^^^^
   `----

Maybe one of these should be marked as a client entry with "use client":
  ../../node_modules/.pnpm/@floating-ui+react-dom-interactions@0.9.3_2zx2umvpluuhvlq44va5bta2da/node_modules/@floating-ui/react-dom-interactions/dist/floating-ui.react-dom-interactions.mjs

To Reproduce
Steps to reproduce the behavior:

1. Create a Next.js 13 project—or any other framework that uses server components.
2. Render an Avatar component on a server component page.
3. See the error

Expected behavior
Static components should work on server components

System information:

• Device: Macbook
• OS: Mac OS
• Browser: Chrome
• Version: Latest

Project information:

• Tailwind: 3.0.0
• Flowbite: 1.4.7
• Flowbite React: 0.1.2
• Type: Next.js 13

[rluders]

@focux could you please update your flowbite-react and check if the issue still happening?

[focux]

Updated to the latest version (0.3.5) and still happening.

[rluders]

We are discussing this on Discord: https://discordapp.com/channels/902911619032576090/1047993578401562624

[rluders]

I want to resume the discussion so far:

Every single component of flowbite-react supports theme, and the theme system uses hooks in order to apply the theme to all components. Currently, there is no other way to convert your components to make them compatible with NextJS 13, but... there is a way to use them... You need to apply the use client directive to your pages that uses flowbite-component.

Source: https://beta.nextjs.org/docs/rendering/server-and-client-components

[AlexW301]

@rluders That makes sense. Will there eventually be a way to work around this? I would like to take advantage of server components while using flowbite

[rluders]

Well, it is hard to say. I know that ppl for other libraries, like material-ui, also are having the same issue. I'm not that much into react/nextjs universe, so... by now, the best thing is to pay attention to other libs moves and wait 'till someone interested in work on this one shows up.

[mpereira]

I'm seeing the same on flowbite-react 0.3.7. Ideally all flowbite-react component parts that require interactivity/state/hooks would be moved to leaves of the render tree, so that server component rendering could be taken advantage of.

For now I'm using the workaround shown in the Next.js 13 docs, which makes a root flowbite-react component (e.g., Avatar) a client component entirely, which doesn't take advantage of server component rendering:

src/js/components/third_party/flowbite-react/Avatar.js:

'use client';

import { Avatar } from 'flowbite-react';

export default Avatar;

---

Original issue for reference:

 2 | export * from '@floating-ui/react-dom';
 3 | import * as React from 'react';
 4 | import { useLayoutEffect, useEffect, useRef } from 'react';
 5 | import { createPortal, flushSync } from 'react-dom';
   :                        ^^^^^^^^^
 6 | import { hideOthers } from 'aria-hidden';
 7 | 
 8 | var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
   `----

Maybe one of these should be marked as a client entry with "use client":
  node_modules/@floating-ui/react-dom-interactions/dist/floating-ui.react-dom-interactions.mjs
  node_modules/flowbite-react/lib/cjs/components/Floating/Floating.js
  node_modules/flowbite-react/lib/cjs/components/Floating/index.js
  node_modules/flowbite-react/lib/cjs/components/Dropdown/Dropdown.js
  node_modules/flowbite-react/lib/cjs/components/Dropdown/index.js
  node_modules/flowbite-react/lib/cjs/components/index.js
  node_modules/flowbite-react/lib/cjs/index.js
  src/js/components/UserPictureAndUsername.js
  src/js/components/StoryListItem.js
  app/stories/page.js

[zoltanszogyenyi]

May I also add my 2 cents - the general consensus in the React / Next.js / Remix ecosystem is that the path forward are server rendered components, meaning we should really take into account providing official support or at least documenting a workaround as people using Flowbite React and choosing to use SSC are going to have trouble using the library from the get-go.