search

tremorlabs / tremor

React components to build charts and dashboards
https://tremor.so
Apache License 2.0
15.39k stars 446 forks source link

BarList component no longer works within server components - Next.js 14 #991

Closed viantirreau closed 1 month ago

viantirreau commented 2 months ago

Hello!

948 introduced a property called onValueChange to the BarList component:

https://github.com/tremorlabs/tremor/blob/bd6566b814d907e130b6827194def10b5bc3661f/src/components/vis-elements/BarList/BarList.tsx#L97-L99

Before upgrading to v3.14.1, I used to render a BarList directly from a server component in Next.js 14, but with the current version, an error is thrown, as a function can't be serialized. In this case, the conflicting function is actually the argument to the onClick prop.

Even though my workaround is extremely simple (just create a new wrapper file with the "use client" directive on top, and export the same component), I think it would be nice to either annotate this component with "use client" as well, or to somehow fall back to a client component only when the prop onValueChange is not undefined, allowing it to be used directly within server components.

Thanks for the great work on this amazing library!

severinlandolt commented 2 months ago

Hi @viantirreau, very good catch! Completely missed that. Thank you very much for the hint. Will make according changes asap!

severinlandolt commented 1 month ago

Hi @viantirreau! Thank yor for reaching out and creating this detailed report. We decided to mark it as a client component.

In that note: We recently launched Tremor Raw, a copy & paste library for React components. Here we have a new version of the BarList, where you have full control over this. Let me know what you think, happy coding ⌨️

viantirreau commented 1 month ago

Wow, Tremor Raw looks amazing. Great escape hatch for handling more customizations! Huge thanks @severinlandolt & team!