From 532a81899509d134bcb7910d0060f4bfd323bd0c Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Fri, 24 Apr 2026 15:17:55 -0500
Subject: [PATCH] Fix RSC build error: pass rendered icon element to DocArticle

DocArticle is a client component, so passing a Lucide icon *component
type* (a function) from the server-rendered doc pages tripped the RSC
"Functions cannot be passed directly to Client Components" check during
prerender of /docs/*. Switch the `icon` prop to React.ReactNode and pass
already-rendered <Icon /> elements from each doc page.

Made-with: Cursor
---
 src/app/(dashboard)/docs/faq/page.tsx            |  2 +-
 .../(dashboard)/docs/forms-templates/page.tsx    |  2 +-
 .../(dashboard)/docs/getting-started/page.tsx    |  2 +-
 .../(dashboard)/docs/reports-exports/page.tsx    |  2 +-
 .../(dashboard)/docs/troubleshooting/page.tsx    |  2 +-
 .../(dashboard)/docs/uploading-cards/page.tsx    |  2 +-
 src/components/support/doc-article.tsx           | 16 +++++++++++-----
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/(dashboard)/docs/faq/page.tsx b/src/app/(dashboard)/docs/faq/page.tsx
index 3532dca..a73f9e3 100644
--- a/src/app/(dashboard)/docs/faq/page.tsx
+++ b/src/app/(dashboard)/docs/faq/page.tsx
@@ -14,7 +14,7 @@ export default function FaqPage() {
     <DocArticle
       title="Frequently Asked Questions"
       description="Quick answers to what comes up most often."
-      icon={HelpCircle}
+      icon={<HelpCircle className="size-[18px]" />}
     >
       <DocSection title="How accurate is the OCR?">
         <p>
diff --git a/src/app/(dashboard)/docs/forms-templates/page.tsx b/src/app/(dashboard)/docs/forms-templates/page.tsx
index fa7c160..dea7f2f 100644
--- a/src/app/(dashboard)/docs/forms-templates/page.tsx
+++ b/src/app/(dashboard)/docs/forms-templates/page.tsx
@@ -17,7 +17,7 @@ export default function FormsTemplatesPage() {
     <DocArticle
       title="Forms &amp; Templates"
       description="Define what fields Echo should pull from each card, map them to your data model, and validate before going live."
-      icon={FileText}
+      icon={<FileText className="size-[18px]" />}
     >
       <DocSection title="What is a form template?">
         <p>
diff --git a/src/app/(dashboard)/docs/getting-started/page.tsx b/src/app/(dashboard)/docs/getting-started/page.tsx
index 4a9e2a5..eed2612 100644
--- a/src/app/(dashboard)/docs/getting-started/page.tsx
+++ b/src/app/(dashboard)/docs/getting-started/page.tsx
@@ -17,7 +17,7 @@ export default function GettingStartedPage() {
     <DocArticle
       title="Getting Started"
       description="Go from signup to your first processed response card in about 10 minutes."
-      icon={Rocket}
+      icon={<Rocket className="size-[18px]" />}
     >
       <DocSection title="1. Create your account">
         <DocSteps>
diff --git a/src/app/(dashboard)/docs/reports-exports/page.tsx b/src/app/(dashboard)/docs/reports-exports/page.tsx
index ed29271..df5bc13 100644
--- a/src/app/(dashboard)/docs/reports-exports/page.tsx
+++ b/src/app/(dashboard)/docs/reports-exports/page.tsx
@@ -17,7 +17,7 @@ export default function ReportsExportsPage() {
     <DocArticle
       title="Reports &amp; Exports"
       description="Slice your card data, export CSVs, and push the results to your connected tools."
-      icon={BarChart3}
+      icon={<BarChart3 className="size-[18px]" />}
     >
       <DocSection title="Built-in reports">
         <p>
diff --git a/src/app/(dashboard)/docs/troubleshooting/page.tsx b/src/app/(dashboard)/docs/troubleshooting/page.tsx
index 031e2e1..3e0c6fc 100644
--- a/src/app/(dashboard)/docs/troubleshooting/page.tsx
+++ b/src/app/(dashboard)/docs/troubleshooting/page.tsx
@@ -15,7 +15,7 @@ export default function TroubleshootingPage() {
     <DocArticle
       title="Troubleshooting"
       description="Common problems, quick fixes, and how to get unstuck."
-      icon={Wrench}
+      icon={<Wrench className="size-[18px]" />}
     >
       <DocSection title="OCR accuracy is lower than I expected">
         <ul className="ml-6 list-disc space-y-2">
diff --git a/src/app/(dashboard)/docs/uploading-cards/page.tsx b/src/app/(dashboard)/docs/uploading-cards/page.tsx
index 1bbf6b1..73f7da6 100644
--- a/src/app/(dashboard)/docs/uploading-cards/page.tsx
+++ b/src/app/(dashboard)/docs/uploading-cards/page.tsx
@@ -17,7 +17,7 @@ export default function UploadingCardsPage() {
     <DocArticle
       title="Uploading Cards"
       description="Everything about getting response cards into Echo — manual uploads, email ingestion, FTP watchers, and the OCR processing lifecycle."
-      icon={Upload}
+      icon={<Upload className="size-[18px]" />}
     >
       <DocSection title="Supported file types">
         <ul className="ml-6 list-disc space-y-1">
diff --git a/src/components/support/doc-article.tsx b/src/components/support/doc-article.tsx
index 27027da..40b5115 100644
--- a/src/components/support/doc-article.tsx
+++ b/src/components/support/doc-article.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { ArrowLeft, type LucideIcon } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { openContactSupport } from "@/components/support/contact-support-dialog";
@@ -9,14 +9,20 @@ import { openContactSupport } from "@/components/support/contact-support-dialog"
 interface DocArticleProps {
   title: string;
   description?: string;
-  icon?: LucideIcon;
+  /**
+   * Icon element, e.g. <Rocket className="size-[18px]" />. Passed as a
+   * rendered React element rather than a component type so server-rendered
+   * doc pages can pass it to this client component without tripping the
+   * "functions cannot be passed to client components" RSC check.
+   */
+  icon?: React.ReactNode;
   children: React.ReactNode;
 }
 
 export function DocArticle({
   title,
   description,
-  icon: Icon,
+  icon,
   children,
 }: DocArticleProps) {
   return (
@@ -30,9 +36,9 @@ export function DocArticle({
           All docs
         </Link>
         <div className="flex items-start gap-3">
-          {Icon && (
+          {icon && (
             <div className="mt-1 flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-              <Icon className="size-[18px]" />
+              {icon}
             </div>
           )}
           <div>