TypeError: Cannot read properties of undefined

I am getting the following errors:

TypeError: Cannot read properties of undefined (reading 'visible')

where the error references the following line and function:

_getSortedDatasetMetas(filterVisible) {
     const me = this;
     const metasets = me._sortedMetasets;
     const result = [];
     let i, ilen;
     for (i = 0, ilen = metasets.length; i < ilen; ++i) {
       const meta = metasets[i];
       if (!filterVisible || meta.visible) { <---- THIS LINE
         result.push(meta);
       }
     }
     return result;
    }

TypeError: Cannot read properties of undefined (reading 'controller')

where the error references the following line:

const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);

The problem is that it happens randomly and I can not find any culprit for the problem.

[chrmcg]

This is happening for me on react-chartjs-2@3.3.0 with chart.js@3.6.0.

It seems that when the data prop passed into <Line> changes, this can happen and has something to do with missing metasets in Chart.js/src/core/core.controller.js:_getSortedDatasetMetas:

(note the empty ⨉ 4 marker)

I was able to mitigate by passing redraw={true}: <Line data={data} options={options} redraw />

But this means I lose out on the cool animation between old data and new data.

@dangreen This is a total guess, but could it be possible that the performance optimizations around here, something about the mutation of old datasets to produce new datasets, are what cause the metasets to be dropped on the Chart.js side? It seems like Chart.js 3.6.0 does use referential equality on datasets to perform some kind of optimization on their end.

Thanks for this amazing package, hoping this can be a helpful pointer to the bug!

[mciszczon]

I had the same problem with "chart.js": "3.6.2" and "react-chartjs-2": "4.0.0", but only in Jest tests. The app was working fine, but the tests would fail with this:

    TypeError: Cannot read property 'prototype' of undefined

      33 | import { Chart as ReactChart } from 'react-chartjs-2'
      34 |
    > 35 | ChartJS.register(
         |         ^
      36 |   ArcElement,
      37 |   LineElement,
      38 |   BarElement,

      at TypedRegistry.isForType (node_modules/chart.js/dist/chart.js:6005:74)
      at Registry._getRegistryForType (node_modules/chart.js/dist/chart.js:6148:15)
      at node_modules/chart.js/dist/chart.js:6128:41
          at Array.forEach (<anonymous>)
      at Registry._each (node_modules/chart.js/dist/chart.js:6127:15)
      at Registry.add (node_modules/chart.js/dist/chart.js:6085:10)
      at Function.register (node_modules/chart.js/dist/chart.js:7407:16)
      ...

I found out that the issue is fixed if I move the ChartJS.register() call to be in the body component, and not outside of it, i.e.

const Component = () => {
	ChartJS.register()
	...
}

instead of

ChartJS.register()

const Component = () => {
	...
}