Не удается разрешить «chart.js/auto»

#reactjs #frontend #chart.js #react-chartjs #react-chartjs-2

Вопрос:

Я пытаюсь использовать chart-js и react-chartjs-2, но показываю следующую ошибку:

Не удалось скомпилировать.

 ./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:UsersAnchart-reactproject-folderclientnode_modulesreact-chartjs-2dist'
 

мой код:

 import React from "react";
import { Bar } from "react-chartjs-2";

function ChartData() {
  const data = {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgba(255, 99, 132, 0.2)",
      },
    ],
  };

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
}

export default ChartData;
 

установленные зависимости:

«chart.js»: «^2.9.4», «react-chartjs-2»: «^3.0.3»

Ответ №1:

Установка последней версии chart.js должна это исправить.

 # with npm
npm install chart.js@latest

# with yarn
yarn add chart.js@latest
 

Это будет обновлено chart.js до последней версии (в настоящее 3.3.0 время ).

Я верю, что это будет работать до тех пор, пока chart.js существует основная версия 3 .


Вот рабочая демонстрационная версия с chart.js установленной последней версией.


Дополнительные примечания

Вы используете версию v2 chart.js , но версию v3 react-chartjs-2 .

react-chartjs-2 Зависимости одноранговых узлов определяют использование chart.js версии ^3.1.0 . Они также упоминают использование v3 chart.js в файле README.

npm yarn Приведенных выше команд или установить должно быть достаточно, если вы согласны с использованием последней версии chart.js .