From b1f0c98fdd0e7b9f02c4904dce8ee44ba1880ab4 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Sat, 6 Jun 2026 18:24:59 -0400
Subject: [PATCH] fix: use node standalone server instead of next start

Dynamically import recharts components with ssr:false to prevent
server-side rendering of DOM-dependent charts, eliminating the
width/height -1 warnings and redacted SSR errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/dashboard/page.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 9fe6ec6..e642b0f 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -20,9 +20,20 @@ import { auth } from "~/lib/auth";
 import { headers } from "next/headers";
 import { HydrateClient, api } from "~/trpc/server";
 import type { StoredInvoiceStatus } from "~/types/invoice";
-import { RevenueChart } from "~/app/dashboard/_components/revenue-chart";
-import { InvoiceStatusChart } from "~/app/dashboard/_components/invoice-status-chart";
-import { MonthlyMetricsChart } from "~/app/dashboard/_components/monthly-metrics-chart";
+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 { AnimatedStatsCard } from "~/app/dashboard/_components/animated-stats-card";
 import type { DashboardStats, RecentInvoice } from "./types";