fix(integrations): resolve Server Components crash on the integration detail page (digest 783665031)#5345
Conversation
… detail page
Root cause (confirmed via staging server logs, digest 783665031): the [block] page.tsx is a server component whose Suspense fallback rendered <ChipLink leftIcon={ArrowLeft}> — passing the lucide icon (a function) across the server->client boundary, which React rejects ("Functions cannot be passed directly to Client Components"). This surfaced as the integrations error boundary / "Failed to load integrations" on soft navigation to a detail page. Move the fallback into a client component so the icon never crosses the boundary.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview The fallback UI is unchanged visually but now lives in Reviewed by Cursor Bugbot for commit 97aac58. Configure here. |
Summary
783665031): the integration detail route[block]/page.tsxis a server component, and its Suspensefallbackrendered<ChipLink leftIcon={ArrowLeft}>. That passes the lucideArrowLeft(a function) across the server→client boundary, which React Server Components rejects: "Functions cannot be passed directly to Client Components." It surfaced as the integrations error boundary ("Failed to load integrations") on soft navigation to a detail page — while a hard refresh papered over it, matching the reported "fails on nav, works on refresh" behavior.'use client'component (IntegrationBlockDetailFallback) that receives onlyworkspaceId(a string). The icon now lives entirely client-side and never crosses the boundary.page/layout/template/default) — this was the only occurrence of the anti-pattern.Type of Change
Testing
Root cause identified directly from the staging CloudWatch app logs (the
digest: '783665031'line = "Functions cannot be passed directly to Client Components"). Fix compiles clean (biome + tsc); the server component no longer importsChipLink/ArrowLeft, so no function prop crosses the RSC boundary.Checklist