[Bug]: Icons in next.js 13

[anthonycook]

Tremor Version

3.7.7

Link to minimal reproduction

https://codesandbox.io/p/sandbox/priceless-euler-7wn4cx

Steps to reproduce

I'm using next.js 13 with the app dir, I get this error when trying to pass the icon prop to any Tremor components that accept them, they are server side components (see repo link)

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

What is expected?

I'd expect the icon to be able to be passed in server components

What is actually happening?

Not sure, it mentions specifying "use server", tried setting this in my components but it didn't work.

What browsers are you seeing the problem on?

No response

Any additional comments?

No response

[severinlandolt]

Hey there, by default Next.js uses server components. You can solve this by adding "use client";

This is not a Tremor problem per se, it's a paradigm shift introduced with Next 13.

+ "use client";
import { SearchIcon } from "@heroicons/react/solid";
import { TextInput } from "@tremor/react";

export default function Example() {
  return (
    <div>
      <TextInput icon={SearchIcon} placeholder="Search customers..." />
    </div>
  );
}

[anthonycook]

Hey @severinlandolt, that’s the issue. I want to use SSR for data fetching. Also adding useClient doesn’t work. I think it expects the Tremor component to specify useClient

[imprakharshukla]

Hey! Did you fix this? Facing the same issue but I really do not want to give up the data fetching and make my component a "client-component".

This only happens if I pass a function to the valueFormatter of a chart.

[zackkrida]

@anthonycook you might want to try this approach:

https://github.com/tremorlabs/tremor/issues/154#issuecomment-1510858051