Next.js使用chart.js时出现Chart.register不是函数报错如何解决

这个错误由三类常见问题触发：

• 依赖未显式导入：代码中ChartJS.register()传入的CategoryScale、LinearScale、BarElement、Title、Tooltip、Legend都没有从chart.js包中导入，直接引用未定义变量会导致注册逻辑执行异常。
• 版本不匹配：Chart.register是chart.js v3.0+才提供的API，如果本地安装的chart.js版本低于v3，或者react-chartjs-2和chart.js的大版本不对应，会直接导致导入的Chart对象不存在该方法。
• Next.js SSR兼容问题：chart.js依赖浏览器DOM API运行，如果代码在服务端渲染阶段执行，会导致导入的Chart实例结构异常，触发方法不存在的报错。

1. 先安装版本匹配的正确依赖，执行命令：

npm install chart.js@^4.4.8 react-chartjs-2@^5.2.0

如果之前装过错误版本，建议先删除node_modules文件夹和对应包管理工具的lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后再重新安装。

2. 补全所有注册模块的导入语句，如果是Next.js App Router环境，需要在文件顶部加'use client'标记为客户端组件，修正后的代码片段如下：

'use client'; // App Router环境必须加，Pages Router可省略
import React, { useEffect, useReducer } from 'react';
// register方法用到的所有模块都要在此处显式导入
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import Layout from '../../components/Layout';
import { getError } from '../../utils/error';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

// 后续业务逻辑正常编写即可

3. 如果使用Pages Router仍偶发SSR相关报错，可以将图表组件改为动态导入、关闭服务端渲染，示例：

import dynamic from 'next/dynamic';
// 替换原有的Bar组件导入语句
const Bar = dynamic(
  () => import('react-chartjs-2').then(mod => mod.Bar),
  { ssr: false }
);

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