I have already installed react chart js 2 but it still have this kind of error

./node_modules/react-chartjs-2/dist/index.modern.js Module not found: Can't resolve 'chart.js'

This is my package.json file

BarChart.js

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

const state = {
  labels: ["Nausea", "Fever", "Muscle Pain"],
  datasets: [
    {
      label: "1st Dose",
      backgroundColor: "rgba(75,192,192,1)",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [65, 59, 80],
    },
    {
      label: "2st Dose",
      backgroundColor: "red",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [30, 20, 10],
    },
  ],
};

export default class Barchart extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{
            title: {
              display: true,
              text: "Average ",
              fontSize: 20,
            },
            legend: {
              display: true,
              position: "right",
            },
          }}
        />
      </div>
    );
  }
}

And the Homepage:

import BarChart from "../../Components/Charts/BarChart";

const Home = () => {
  return (
    <div>
      <BarChart />
    </div>
  );
};

export default Home;

I have already installed react chart js 2 but it still have this kind of error

./node_modules/react-chartjs-2/dist/index.modern.js Module not found: Can't resolve 'chart.js'

This is my package.json file

BarChart.js

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

const state = {
  labels: ["Nausea", "Fever", "Muscle Pain"],
  datasets: [
    {
      label: "1st Dose",
      backgroundColor: "rgba(75,192,192,1)",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [65, 59, 80],
    },
    {
      label: "2st Dose",
      backgroundColor: "red",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [30, 20, 10],
    },
  ],
};

export default class Barchart extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{
            title: {
              display: true,
              text: "Average ",
              fontSize: 20,
            },
            legend: {
              display: true,
              position: "right",
            },
          }}
        />
      </div>
    );
  }
}

And the Homepage:

import BarChart from "../../Components/Charts/BarChart";

const Home = () => {
  return (
    <div>
      <BarChart />
    </div>
  );
};

export default Home;

• javascript
• reactjs
• react-chartjs-2

• Could you post the full error message here, please? – Ryan Le Commented Aug 14, 2021 at 9:05
• I've edited it already – JS3 Commented Aug 14, 2021 at 9:17

3 Answers 3

You need chart.js as well as react-chartjs-2.

npm install chart.js

Kindly follow these steps to resolve your problem :

• Delete the 'node_modules' folder from your project and package-lock.json

• npm install

• If issue still persists then run

• npm i react-chartjs-2 or npm i chart.js

• Or Remove react-chartjs-2 from package.json

• npm i react-chartjs-2 or npm i chart.js

for me, when i changed my node version from v16.15.1 to v16.15.0 the problem was solved.