Vite+React+TS构建的Electron中react-chartjs-2白屏问题求助

1. 补全缺失依赖 #

react-chartjs-2 依赖 chart.js 核心库，先确认已安装对应依赖：

npm install chart.js react-chartjs-2
# 或使用 yarn
yarn add chart.js react-chartjs-2

2. 手动注册Chart.js核心模块 #

新版本Chart.js要求手动注册所需组件，修改你的Analytics组件代码：

import { Doughnut } from "react-chartjs-2";
// 导入并注册Chart.js必要模块
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend
} from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

const Analytics = () => {
    const data = {
        labels: ["Rent", "Groceries", "Utilities", "Others"],
        datasets: [
            {
                data: [8000, 15000, 5000, 12000],
                backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4CAF50"],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#4CAF50",
                ],
            },
        ],
    };

    return (
        // 给图表容器设置明确宽高，避免无法渲染
        <div style={{ width: '400px', height: '400px' }}>
            <Doughnut data={data} />
        </div>
    );
};

export default Analytics;

3. 适配Electron环境调整Vite配置 #

在vite.config.ts中添加配置，避免canvas相关依赖打包异常：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ['canvas'],
    },
  },
  optimizeDeps: {
    exclude: ['canvas'],
  },
});

4. 确认组件正确引入 #

检查主组件中Analytics的引入方式是否正确，示例：

import Analytics from './Analytics';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Analytics />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Lucky