why am I getting a runtime error by importing react-chartjs-2

Question

I'm new to React. I'm trying to use charjs as a react component.

as soon as I add the following import statement, I get a runtime error:

import { Bar } from 'react-chartjs-2';

runtime error:

The component compiles and causes the above error?

component code:

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

const BarChart = () => {
    return (
        <div>
            Bar Chart
        </div>
    )
}

export default BarChart

What am I doing wrong?

Answer 1

Figured out the issue. chart.js was just upgraded from version 2.x to 3.x - there are several breaking changes that react-chartjs-2 is not yet updated with. I downgraded chart.js version to 2.9.4 and got it to work:

 npm install chart.js@2.9.4