在React中使用Chart.js时出现Missing Class Properties Transform错误

错误原因 #

你遇到的编译错误是因为Chart.js v4.x使用了类静态属性语法，但你的项目Babel配置（比如旧版create-react-app）未启用对该语法的转译支持。

解决方案 #

方案1：升级React项目构建工具（推荐） #

如果你的项目基于create-react-app创建，升级至最新版react-scripts即可支持类属性语法：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

方案2：降级Chart.js到兼容版本 #

若不想升级构建工具，可降级到Chart.js v3.x及对应版本的react-chartjs-2，这组版本无需类属性转译支持：

npm uninstall chart.js react-chartjs-2
npm install chart.js@^3.9.1 react-chartjs-2@^4.3.1

额外代码修正 #

你的graph.jsx组件存在参数传递问题：组件接收的是props对象，直接传入chartData会把整个props对象传给图表，需解构出目标属性：

// 修改后的graph.jsx
import React from 'react';
import { Chart as ChartJS } from "chart.js/auto"
import { Line } from 'react-chartjs-2';

// 解构props，获取chartData参数
function Graph({ chartData }) {
  return <Line data={chartData} />;
}

export default Graph;

完成以上操作后，重启项目即可正常编译并渲染图表。

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