[Bug]: Icons in next.js 13 #693
Labels
Type: Bug
Confirmed bug, something is not working as intended
Comments
|
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>
);
} |
|
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 |
|
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. |
severinlandolt
added
Status: Help Wanted
|
@anthonycook you might want to try this approach: https://github.com/tremorlabs/tremor/issues/154#issuecomment-1510858051 |
14 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
The text was updated successfully, but these errors were encountered: