Describe the bug
Phosphor icons use context, which is unavailable in server components. To fix this, import icons that are used in server components from @phosphor-icons/react/ssr instead of the main package.
Affected component/components
Breadcrumb, other server components that use icons
How to reproduce
- Make a new next.js shadcn project with phosphor icons. (
pnpm dlx shadcn@latest init --preset bp96 --template next --pointer)
- Install the breadcrumb component
- Add a simple usage with a separator like:
<Breadcrumb>
<BreadcrumbItem>Foo</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>Bar</BreadcrumbItem>
</Breadcrumb>
in a server component
4. Run dev server and see error
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/breadcrumb-bug-demo-nkfhcl
Logs
GET / 500 in 1799ms (compile: 1697ms, render: 102ms)
⨯ TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
at module evaluation (components/ui/breadcrumb.tsx:5:1)
at module evaluation (app/page.tsx:1:1)
at module evaluation (.next/dev/server/chunks/ssr/[root-of-the-server]__24026417._.js:209:47)
3 |
4 | import { cn } from "@/lib/utils"
> 5 | import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"
| ^
6 |
7 | function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
8 | return ( {
page: '/'
}System Info
Does not matter, happens in all environments
Before submitting
Describe the bug
Phosphor icons use context, which is unavailable in server components. To fix this, import icons that are used in server components from
@phosphor-icons/react/ssrinstead of the main package.Affected component/components
Breadcrumb, other server components that use icons
How to reproduce
pnpm dlx shadcn@latest init --preset bp96 --template next --pointer)in a server component
4. Run dev server and see error
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/breadcrumb-bug-demo-nkfhcl
Logs
System Info
Does not matter, happens in all environmentsBefore submitting