From a359965bff6e5abd035f41b228329532600a022c Mon Sep 17 00:00:00 2001 From: hailin Date: Sun, 5 Apr 2026 21:38:57 -0700 Subject: [PATCH] fix: dynamic import echarts-wordcloud to avoid SSR window crash echarts-wordcloud accesses window at import time, causing 500 error during server-side rendering. Moved to dynamic import() inside useEffect which only runs on the client. Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/frameworks/components/charts/EChartsBase.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/frameworks/components/charts/EChartsBase.tsx b/frontend/src/frameworks/components/charts/EChartsBase.tsx index eb3cc71..e4617f7 100644 --- a/frontend/src/frameworks/components/charts/EChartsBase.tsx +++ b/frontend/src/frameworks/components/charts/EChartsBase.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; -import 'echarts-wordcloud'; import { useThemeStore } from '@/adapters/state/zustand/themeStore'; // --------------------------------------------------------------------------- @@ -42,13 +41,17 @@ export const EChartsBase: React.FC = ({ const chartRef = useRef(null); const currentTheme = useThemeStore((s) => s.currentTheme); + // Load echarts-wordcloud plugin on client side only + useEffect(() => { + import('echarts-wordcloud').catch(() => {}); + }, []); + // Init / re-init when theme changes useEffect(() => { if (!containerRef.current) return; // Dispose previous instance if theme changed if (chartRef.current) { - // Unregister from global map before disposing if (chartId) instanceMap.delete(chartId); chartRef.current.dispose(); }