Can't resolve 'chart.js/auto'

Question

I am trying to use chart-js and react-chartjs-2 but is showing following error:

Failed to compile.

./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:\Users\An\chart-react\project-folder\client\node_modules\react-chartjs-2\dist'

my code:

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;

installed dependencies:

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

Dan Kreiger · Answer 1 · 2021-05-24T20:41:42.420

Installing the latest version of chart.js should fix this.

# with npm
npm install chart.js@latest

# with yarn
yarn add chart.js@latest

This will update chart.js to latest version (currently 3.3.0).

I believe it will work as long as the chart.js major version is 3+.

Here is a working Demo with the latest version of chart.js installed.

More notes

You are using v2 of chart.js but v3 of react-chartjs-2.

The react-chartjs-2 peer dependencies specify using chart.js version ^3.1.0. They also mention using v3 of chart.js in the README.

The npm or yarn install commands above should be enough if you are ok with using the latest version of chart.js.

Can't resolve 'chart.js/auto'

1 Answers1