Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jayantbh opened this issue Oct 23, 2022 · 1 comment

Comments

@jayantbh
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant