我试图使用Chart.js在react中生成我的第一个图表，但我似乎无法克服这个错误。我使用的是“react-chartjs-2”：“^5.1.0”、“图表. js”：“^4.1.0”，以及“React”：“^18.2.0”中的“^18.2.0”。
错误如下：

Failed to compile.
    
    ./node_modules/chart.js/dist/chart.js
    SyntaxError: /Users/johnwomelsdorf/Documents/Code/Ski-Website-              FrontEnd/node_modules/chart.js/dist/chart.js: Missing class properties transform.
    566 |     };
    567 | class DatasetController {
    
    568 |  static defaults = {};
    |  ^^^^^^^^^^^^^^^^^^^^^
    569 |  static datasetElementType = null;
    570 |  static dataElementType = null;
    571 |  constructor(chart, datasetIndex){.at transformFile.next (\<anonymous\>)
    at run.next (\<anonymous\>)
    at transform.next (\<anonymous\>)\`

字符串
我的准则是：App.js:

import React, { Component } from 'react';
    import Navbar from './components/NavBar';
    import Conditions from './components/conditions';
    import Graph from './components/graph';
    import { Data } from './components/data';
    
    class App extends Component {
    state = {
    resorts : \['Okemo', 'Snow', 'Hunter', 'Sunapee', 'Stowe'\],
    resort : 'Okemo'
    };
    
        render() { 
           return (
                <div className='main__wrap'>
                    <Navbar />
                    <div className='conditions__box'>
                        <h2>Current Conditions</h2>
                        <Conditions resort = {this.state.resort} />
                   </div>
                    <div className='graph__box'>
                        <h2>Conditions this year</h2>
                        <Graph chartData={Data}/>
                    </div>
                </div>
            
            );
        };
    
    }
    
    export default App;

型
graph.jsx:

import React from 'react';
    import { Chart as ChartJS } from "chart.js/auto"
    import { Line } from 'react-chartjs-2';
    
    function Graph(chartData) {
    return \<Line data={chartData} /\>;
    }
    
    export default Graph;

型
data.js:

export const Data = {
        labels: \[1, 2, 3, 4, 5, 6\],
        datasets: \[
        {
            label: "% Lifts Open",
            data: \[33, 40, 80, 90, 100, 60\]
            //borderColor: "rgba(19, 49, 92, 1)",
            //backgroundColor: "rgba(19, 49, 92,0.2)",
        },
        {
            label: "% Trails Open",
            data: \[15, 30, 60, 95, 95, 45\]
            //borderColor: "rgba(141, 169, 196, 1)",
            //backgroundColor: "rgba(141, 169, 196,0.2)",
        },
        {
            label: "% Terrain Open",
            data: \[9, 23, 65, 83, 90, 34\]
            //borderColor: "rgba(19, 64, 116, 1)",
            //backgroundColor: "rgba(19, 64, 116,0.2)",
        }
        ]
    };

型
谢谢，希望这只是我的一个误会。
我已经尝试过改变数据的形状，以及图形调用数据的方式。