hailin
/
dv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 21:38:57 -07:00
parent 2d5dfae835
commit a359965bff
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/frameworks/components/charts/EChartsBase.tsx
View File

@ -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<EChartsBaseProps> = ({
const chartRef = useRef<echarts.ECharts | null>(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();
}