使用Chart.js+TypeScript+Next.js时遇'react-server-dom-webpack'解析错误

核心原因 #

该错误多因react-chartjs-2版本与Next.js App Router（Server Components）不兼容，或依赖包缺失、版本不匹配导致。

解决方案 #

1. 补全依赖安装 #

react-chartjs-2依赖chart.js和react-dom，先确认这些包已安装：

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

2. 降级react-chartjs-2版本 #

若使用v5+版本的react-chartjs-2，可能和Next.js App Router存在兼容性问题，可降级至稳定的v4版本：

npm install react-chartjs-2@4.3.0

3. 标记组件为Client Component #

Next.js App Router下，page.tsx默认是Server Component，而react-chartjs-2需在Client Component中运行。在你的页面文件或封装的图表组件顶部添加：

'use client';

示例代码：

'use client';

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

// 注册Chart.js所需模块
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export default function Home() {
  const chartData = {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [
      {
        label: '月度数据',
        data: [23, 45, 18, 37, 52],
        borderColor: '#2196F3',
        fill: false,
        tension: 0.2
      }
    ]
  };

  return <Line data={chartData} />;
}

4. 清除缓存重启服务 #

缓存可能导致依赖解析异常，执行以下命令重置：

rm -rf .next node_modules package-lock.json
npm install
npm run dev

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