Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'syncEventHandler')

[jayantbh]

Issue: The error in the title shows up the moment chartjs-plugin-crosshair is added. Commenting out just its registration line removes the error.

I see one of two errors, and it's hard to determine when either happens:

1. Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'syncEventHandler')
2. Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'enabled')

I'm using Next.js 12.3.2-canary.15, though I don't expect this to be caused by the canary build. In any case, if someone knows this to be an issue in canary, let me know.

Initialization code:

const [
  { default: zoomPlugin },
  { CrosshairPlugin, Interpolate },
  { default: GradientPlugin },
  { default: AnnotationPlugin }
] = await Promise.all([
  import('chartjs-plugin-zoom'),
  import('chartjs-plugin-crosshair'),
  import('chartjs-plugin-gradient'),
  import('chartjs-plugin-annotation')
]);
Chart.register(zoomPlugin);
Chart.register(CrosshairPlugin);
Chart.register(GradientPlugin);
Interaction.modes.interpolate = Interpolate;
Chart.register(AnnotationPlugin);

Versions:

"react": "^18.2.0",
"chart.js": "^3.9.1",
"chartjs-plugin-annotation": "^2.0.1",
"chartjs-plugin-crosshair": "^1.2.0",
"chartjs-plugin-gradient": "^0.5.1",
"chartjs-plugin-zoom": "^1.2.1",

Point of error:

  173 |   const chart = new Chart(elRef.current.getContext('2d'), chartOptions);
  174 |   return () => {
> 175 |     chart.destroy();
      |          ^
  176 |   };
  177 | }, [chartOptions]);

[jayantbh]

I believe this may have something to do with the crosshair plugin being enabled for non "grid-like" charts, such as for pie charts and all that don't have X/Y axes.

Because I was using a common config for all my charts, bar, line, pie, etc. When I disabled the crosshair plugin for pie charts, the error stopped.

To disable it I had to set options.plugins.crosshair = false.

Still, instead of crashing, I'd expect it to just ignore the plugin it's not going to work and throw a warning maybe.