Server-side component for Next.js

[Hayao0819]

I am using this project in Next.js 14 with app router.

As it is mentioned in a previous Issue, react-daisyui cannot be used as a server-side component because it uses ThemeContext.

I would like to see a permanent solution that does not use ThemeContext, as benjitrosch mentioned earlier at here and here.

I created this Issue to make it easier for other contributors to find comments. (I could not find anything in the current Issue that explicitly mentions this issue.)

Related Issues are as follows:

• NextJS v13.0 issues #244
• Seemingly incompatible with next 13. "You're importing a component that needs useImperativeHandle" #306

I understand that many changes are needed to accomplish this task, but it must help many people.

[vincentropy]

Hey @benjitrosch

I see you added a "help wanted" tag here. I may be able to help.

I think it's possible to get about 90% of the value here with some minor changes.

The components that actually use the client-side features like useEffect and useState are

Carousel.tsx
Checkbox.tsx
Collapse.tsx
Model.tsx
Theme.tsx
useTheme.ts

All the other components should work fine as server components.

The main issue is with the way the package is bundled at the moment:

The package is using microbundle to create a single bundle file. This means that the import-statements for useState and useEffect etc. are at the top of that bundle file and none of the components in the bundle can be server components.

I've been working on a solution here:
https://github.com/vincentropy/react-daisyui/tree/enable-server-components

I made 2 changes:

1. Use the basic typescript compiler to generate the distribution (instead of microbundle).
   This leaves individual components in separate files. I think this should a non-breaking change because nearly everyone (?) uses a bundler to build their react project. There should be no need to bundle the UI component library.
2. Add the "use client" directive to the 6 components that use client-side logic.

I created a simple nextjs project to test this and server components seem to work for me.

If you want to test this in your own nextjs project you can install directly from GitHub:
npm install https://github.com/vincentropy/react-daisyui.git#enable-server-components

I would be grateful for any feedback. Does this solution break anything for anyone?
If you're open to a PR, I'd be happy to contribute one.