TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

Question

I'm trying to use the react wrapper of chart.js and I'm having an issue. When I'm trying to add a chart, there is an error (" TypeError: Cannot read property 'defaults' of undefined")

The code is the following:

import React, { useState, useEffect } from 'react';
import api from '../../services/API';
import './Graph.css';
import { Line } from 'react-chartjs-2';

export default function Graph() {
    const [dataChart, setDataChart] = useState({ });

    useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;
        const getData = async() => {
            let confirmedCases = [];
            let dateOfCases = [];
            await api.get('btt-prices', {signal: signal})
            .then ( resp => {
                for (const dataObj of resp.data ) {
                    console.log( dataObj )
                    confirmedCases.push(dataObj.price);
                    let tempDate = new Date (dataObj.date);
                    dateOfCases.push(tempDate.getUTCDate());
                }
            });
            
            setDataChart({ 
                labels: dateOfCases, 
                datasets: [{ 
                  label: 'Confirmed cases', 
                  data: confirmedCases 
                }]
            });
    
            //console.log(dataChart)
        }

        getData();
        return () => {
            abortController.abort();
        }
    }, []);
    
    return(
        <div className='container'>
            <Line data={ dataChart }/>
        </div>   
    );
}

The error that shows is the following:

TypeError: Cannot read property 'defaults' of undefined
(anonymous function)
C:/Users/e/Desktop/test/front/node_modules/react-chartjs-2/es/index.js:643
  640 | }(_react["default"].Component);
  641 | 
  642 | exports.Scatter = Scatter;
> 643 | var defaults = _chart["default"].defaults;
  644 | exports.defaults = defaults;

I tried to search about it but I can't see any solution... I tried to install again chartjs (besides react-chartjs) just in case, but the error still remains. How can I solve this error Thank you!

Answer 1

Which version of chart.js are you running because if you reinstalled it its a high chance you are running version 3 of the lib which is at the moment still not compatible with the wrapper so you will have to install the latest version 2 release of chart.js (2.9.4)