From 03629431fd1991a4fb6c61473e3e7067e422f329 Mon Sep 17 00:00:00 2001
From: Cloud User <ubuntu@dv2-kr3-ins-bastion-01.novalocal>
Date: Mon, 16 Mar 2026 11:12:00 +0900
Subject: [PATCH] fix: dynamic import for echarts, html2canvas, jspdf to
 prevent SSR errors

---
 src/app/page.tsx                          | 4 ++--
 src/components/charts/NetworkChart.tsx    | 4 +++-
 src/components/charts/TimeSeriesChart.tsx | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 23eb882..1e64fc6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,8 +8,6 @@ import TimeSeriesChart from '@/components/charts/TimeSeriesChart';
 import NetworkChart from '@/components/charts/NetworkChart';
 import NodeTable from '@/components/report/NodeTable';
 import AlertSection from '@/components/report/AlertSection';
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
 
 export default function Home() {
   const [days, setDays] = useState(7);
@@ -18,6 +16,8 @@ export default function Home() {
 
   const handleExportPdf = async () => {
     if (!reportRef.current) return;
+    const html2canvas = (await import('html2canvas')).default;
+    const { default: jsPDF } = await import('jspdf');
     const canvas = await html2canvas(reportRef.current, { scale: 2, useCORS: true });
     const imgData = canvas.toDataURL('image/png');
     const pdf = new jsPDF('p', 'mm', 'a4');
diff --git a/src/components/charts/NetworkChart.tsx b/src/components/charts/NetworkChart.tsx
index 282153c..bd14d05 100644
--- a/src/components/charts/NetworkChart.tsx
+++ b/src/components/charts/NetworkChart.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import ReactECharts from 'echarts-for-react';
+import dynamic from 'next/dynamic';
 import type { NetworkMetrics } from '@/types/metrics';
 import { formatTimestamp, formatBytes } from '@/lib/formatters';
 
+const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });
+
 interface NetworkChartProps {
   data: NetworkMetrics;
   height?: number;
diff --git a/src/components/charts/TimeSeriesChart.tsx b/src/components/charts/TimeSeriesChart.tsx
index dc51905..1563c25 100644
--- a/src/components/charts/TimeSeriesChart.tsx
+++ b/src/components/charts/TimeSeriesChart.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import ReactECharts from 'echarts-for-react';
+import dynamic from 'next/dynamic';
 import type { MetricInstance } from '@/types/metrics';
 import { formatTimestamp } from '@/lib/formatters';
 
+const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });
+
 interface TimeSeriesChartProps {
   title: string;
   instances: MetricInstance[];