0

My react app has been working fine using a component imported from react-chartjs-2 for a while but recently it started to crash after having made no changes to that area of the app.

I get the below errors multiple times in the console, the invalid hook call is the warning that shows in the browser:

index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

Uncaught TypeError: Cannot read properties of null (reading 'useRef')

The above error occurred in the <ForwardRef(ChartComponent)> component:

I've tried inserting a component imported from react-chartjs-2 in a completely different page in the same app but it makes it crash there too. If i comment out the component the app stops crashing and the page loads.

I'm at a loss, any suggestions?? Below is the code for the component.

import { Line } from 'react-chartjs-2';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
  } from 'chart.js'
ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
    )


const CapacityChart = ({chartData, generateChartData}) => {

    console.log(chartData, 'chart data in chart component')

const options = {
    plugins : {
        legend: {
            display: false
        }
    }
};

  return (
      <>
      <div 
        className='capacity-chart-refresh-btn'
        onClick={()=>generateChartData()}
        >
            <FontAwesomeIcon icon={faArrowsRotate} />
        </div>
        <Line 
            options={options}
            data={chartData}
            height = {10}
        />
      </>
  )
}

export default CapacityChart
Jowin
  • 9
  • 2

1 Answers1

-1

Figured it out, answer for anyone in similar situation was I have a server and a frontend for my app, the two have different package.json files and node_module folders.. I had installed react-chartjs-2 and chart.js in the server's modules instead of the frontend's so I think it was using a different instance of React as described on their site:

React invalid hook warning

Jowin
  • 9
  • 2