Remix.run与Chart.js（react-chartjs-2）图表不显示，问题出在哪？

核心原因 #

Remix 是服务端渲染（SSR）框架，而 Chart.js 依赖浏览器环境的 window 对象与 DOM API 完成图表初始化。在服务端渲染阶段，这些浏览器专属的环境变量不存在，导致图表无法正常初始化，最终只生成了一个未被正确渲染的小型 canvas 元素。而 create-react-app 是纯客户端渲染，不存在这个环境差异，所以图表能正常显示。

另外，若图表的父容器没有设置明确的宽高，responsive: true 配置也无法生效，会让 canvas 因缺少尺寸参考而缩成极小状态。

解决步骤 #

1. 将图表组件标记为客户端组件 #

在 Remix v1.19 及以上版本，可直接在组件文件顶部添加客户端指令，强制组件仅在浏览器端渲染：

'use client';

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js/auto';
import { Line } from 'react-chartjs-2';
import faker from 'faker';

// 后续代码保持不变...

若使用旧版 Remix，可通过 React.lazy 和 Suspense 实现客户端懒加载：

import { Suspense, lazy } from 'react';

const LineChart = lazy(() => import('./LineChart')); // 把图表代码单独拆到LineChart.js文件中

export default function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <LineChart />
    </Suspense>
  );
}

2. 给图表容器设置明确尺寸 #

在渲染 Line 组件时，用一个带样式的 div 包裹，确保容器有宽高：

export default function App() {
  return (
    <div style={{ width: '800px', height: '400px' }}>
      <Line options={options} data={data} />
    </div>
  );
}

或者在 Chart.js 的配置中固定比例：

export const options = {
  responsive: true,
  maintainAspectRatio: true,
  aspectRatio: 2, // 宽高比2:1
  // 其他配置保持不变...
};

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