Ошибка типа: не удается прочитать свойство 'defaults' неопределенного значения при использовании оболочки react chartjs

#javascript #reactjs #chart.js #react-chartjs

Вопрос:

Я пытаюсь использовать оболочку react для chart.js и у меня возникла проблема. Когда я пытаюсь добавить диаграмму, появляется ошибка (» Ошибка типа: не удается прочитать свойство ‘defaults’ значения undefined»)

Код следующий:

 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>   
    );
}

Отображаемая ошибка заключается в следующем:

 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;

Я пытался найти об этом, но я не вижу никакого решения… Я попытался снова установить chartjs (помимо react-chartjs) на всякий случай, но ошибка все еще остается.
Как я могу решить эту ошибку
Спасибо!

Ответ №1:

Какая версия chart.js вы работаете, потому что, если вы переустановили его, высока вероятность, что вы используете версию 3 библиотеки, которая на данный момент все еще несовместима с оболочкой, поэтому вам придется установить последнюю версию 2 выпуска chart.js (2.9.4)

1. Вы были совершенно правы. Вы спасли мой день, спасибо!!

2. Я столкнулся с этой проблемой, когда обновил зависимости своего проекта от chart.js 2.9.3 и react-chartjs-2 2.9.0 на более новую chart.js версия решение состоит в том, чтобы понизить рейтинг до chart.js 2.9.3

Ответ №2:

Да, спасибо, теперь это решение также работает для меня,

Я использовал chart.js с версией > 3.x

затем я понизил версию до 2.9.4, после чего она сработала для меня.

Yarn Команда
yarn добавить react-chartjs-2
добавить пряжу chart.js@2.9.4

Ответ №3:

Первый

 npm uninstall react-chartjs

затем

 npm i react-chartjs-2@2.9.0