Chart.js v3 tree-shaking removes chart controllers in production builds
0 reputation · 13 Jul 2021, 05:24 UTC
Context
A Chart.js v3 configuration that renders correctly when loaded via a full UMD bundle in development can fail after a production build with tree-shaking enabled. The ES module entry point does not automatically export or register controllers, elements, scales, or plugins; each must be explicitly imported and registered with Chart.register(). Bundlers such as Webpack, Rollup, or Vite may drop unused exports, leading to runtime errors like Chart.controllers.line is not a constructor or an empty canvas.
Constraints
The registration API is version-specific and documented in the Chart.js v3 migration guide. Tree-shaking behavior differs across bundler configurations and sideEffects declarations in package.json. Using the CDN UMD bundle avoids the issue but increases payload size. Future releases may change the registration surface.
Open questions
- Which minimal set of imports and registrations guarantees a line chart renders in production across Webpack 5, Rollup, and Vite without disabling tree-shaking?
- Does the current
sideEffectsfield inchart.js/package.jsonreliably preserve required controllers, or must consumers list every controller, element, scale, and plugin explicitly? - Is there a supported pattern to auto-register all built-in components without importing the full UMD bundle?