soconnor/beenvoice-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move ssr:false dynamic imports into client component

Browse Source 
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>
This commit is contained in:
Sean O'Connor
2026-06-06 18:26:42 -04:00
parent b1f0c98fdd
commit 839016532c
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/_components/charts-client.tsx
+21
View File
@@ -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 },
);
src/app/dashboard/page.tsx
+1 -14
View File
@@ -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";