Missing Class Properties Transform Error using Chart.js in React

Question

I'm trying to generate my first chart in react using Chart.js, and I cannot seem to get over this error. I'm using "react-chartjs-2": "^5.1.0", "chart.js": "^4.1.0", and "react": "^18.2.0".

Here is the Error:


    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\>)\`

And here is my Code: 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)",
        }
        ]
    };

Thank you, hoping this is a simple misunderstanding on my part.

I have tried changing the shape of the data, as well as the way it is called by the graph.

are you able to compile classes using your compiler setup? Are you using babel to transpile your code? or webpack? or are you use create-react-app? How are you setting up your project — Coty Embry, Dec 28 '22 at 23:00
I looked at my babel.config.js file and I have `@babel/plugin-proposal-class-properties` that might help you to add that in if you're using babel? — Coty Embry, Dec 28 '22 at 23:03
Hello Coty. I just used create-react-app and then used yarn to install packages. — John Womelsdorf, Dec 30 '22 at 03:14
It could be because modules are not being transpiled from the node_modules/ folder hmm — Coty Embry, Dec 30 '22 at 20:17
without ejecting from create-react-app and configuring things yourself, I think you could maybe copy or move those node_modules outside of the node_modules folder into your own folder and pull from the new location (that would be outside of node_modules/) and it might start transpiling them — Coty Embry, Dec 30 '22 at 20:23
the chart.js/ folder and the react-chartjs-2 folders/modules — Coty Embry, Dec 30 '22 at 20:24
or going deeper you might be able to get away with doing something like mentioned in here and running `babel` at the command line on the node_modules/ good luck! https://stackoverflow.com/questions/57761818/create-react-app-transpile-jsx-of-external-package-in-node-modules — Coty Embry, Dec 30 '22 at 20:29

score 0 · Answer 1 · answered Jul 02 '23 at 09:37

0

I was also having the same problem. Just downgrade your chart-js and react-chartjs-2 version.

I am using Chart Js .v3

answered Jul 02 '23 at 09:37

M2K Developments

86
1
3

Missing Class Properties Transform Error using Chart.js in React

1 Answers1