From 839016532c3504afbc30d11aafe0983f74276ec3 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Sat, 6 Jun 2026 18:26:42 -0400
Subject: [PATCH] fix: move ssr:false dynamic imports into client component

Turbopack disallows ssr:false in Server Components. Extracted the three
recharts dynamic imports into charts-client.tsx ("use client"), which
page.tsx now imports from directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../dashboard/_components/charts-client.tsx   | 21 +++++++++++++++++++
 src/app/dashboard/page.tsx                    | 15 +------------
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/app/dashboard/_components/charts-client.tsx

diff --git a/src/app/dashboard/_components/charts-client.tsx b/src/app/dashboard/_components/charts-client.tsx
new file mode 100644
index 0000000..a27a8e7
--- /dev/null
+++ b/src/app/dashboard/_components/charts-client.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Skeleton } from "~/components/ui/skeleton";
+
+const chartSkeleton = () => <Skeleton className="h-64 w-full" />;
+
+export const RevenueChart = dynamic(
+  () => import("./revenue-chart").then((m) => m.RevenueChart),
+  { ssr: false, loading: chartSkeleton },
+);
+
+export const InvoiceStatusChart = dynamic(
+  () => import("./invoice-status-chart").then((m) => m.InvoiceStatusChart),
+  { ssr: false, loading: chartSkeleton },
+);
+
+export const MonthlyMetricsChart = dynamic(
+  () => import("./monthly-metrics-chart").then((m) => m.MonthlyMetricsChart),
+  { ssr: false, loading: chartSkeleton },
+);
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index e642b0f..b1e5a6f 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -20,20 +20,7 @@ import { auth } from "~/lib/auth";
 import { headers } from "next/headers";
 import { HydrateClient, api } from "~/trpc/server";
 import type { StoredInvoiceStatus } from "~/types/invoice";
-import dynamic from "next/dynamic";
-
-const RevenueChart = dynamic(
-  () => import("~/app/dashboard/_components/revenue-chart").then((m) => m.RevenueChart),
-  { ssr: false, loading: () => <Skeleton className="h-64 w-full" /> },
-);
-const InvoiceStatusChart = dynamic(
-  () => import("~/app/dashboard/_components/invoice-status-chart").then((m) => m.InvoiceStatusChart),
-  { ssr: false, loading: () => <Skeleton className="h-64 w-full" /> },
-);
-const MonthlyMetricsChart = dynamic(
-  () => import("~/app/dashboard/_components/monthly-metrics-chart").then((m) => m.MonthlyMetricsChart),
-  { ssr: false, loading: () => <Skeleton className="h-64 w-full" /> },
-);
+import { RevenueChart, InvoiceStatusChart, MonthlyMetricsChart } from "~/app/dashboard/_components/charts-client";
 import { AnimatedStatsCard } from "~/app/dashboard/_components/animated-stats-card";
 import type { DashboardStats, RecentInvoice } from "./types";