How to solve this error?: Unable to resolve path to module 'react-chartjs-2'

Question

So, I'm trying to implement the chartJs library to my ReactApp, and I'm struggling with this problem

Unable to resolve path to module 'react-chartjs-2'.

My dependecies:

"dependencies": { 
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "chart.js": "^4.1.1", 
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
},

The component:

import React from 'react';
import { Bar } from 'react-chartjs-2';
import PropTypes from 'prop-types';

function BarChart({ chartData }) {
return (
\<Bar data={chartData} /\>
);
}

export default BarChart;

ESLint config:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": \[
    "plugin:react/recommended",
    "airbnb"
  \],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": \[
    "react"
  \],
  "rules": {
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": \[".js", ".jsx", ".ts", ".tsx"\]
      }
    }
  }
}

I've already deleted the node modules and tried to install all the packages again, but it can't fix this problem.

I was following this video to try to implement into my project: https://www.youtube.com/watch?v=RF57yDglDfE&ab_channel=PedroTech

Answer 1

it seems to be an issue with the new version for react-chartjs-2, you can try an older version - 4.3.1 is working fine