[Bug]: Charts are auto-registered in develop build, but not in production build
Would you like to work on a fix?
- Check this if you would like to implement a PR, we are more than happy to help you go through the process.
Current and expected behavior
Disclaimer:
I'm not fully into the ecosystem, so I might get some ideas wrong. I'll explain to the best of my knowledge.
Summary:
typedcharts.tsx:33 (and after) states it has no side effects ( __PURE__) , but in reality there are ( charts get registered ) .
As a result, charts show on develop builds, but production build crashes entirely.
Details:
Below is an extract of typedCharts.tsx, around 33
function createTypedChart<T extends ChartType>(
type: T,
registerables: ChartComponentLike
) {
ChartJS.register(registerables);
return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>(
(props, ref) => <Chart {...props} ref={ref} type={type} />
) as TypedChartComponent<T>;
}
export const Line = /* #__PURE__ */ createTypedChart('line', LineController);
...Problem
The last line states it has no side effects. This cases deletion during the tree-shaking process in production builds (at least as much as I understand).
build system:
- webpack:
- devserver: Charts don't need registration in user code. Everything works fine without registration.
- production build: Charts don't need registration in user code. Everything works fine without registration.
- vite:
- devserver (
vite --mode devlocal): Charts don't need registration in user code. Everything works fine without registration. - production build (
vite build --mode production): Charts need registration in user code. App crashes without registration.
- devserver (
Reproduction
At the time of writing I cannot provide a reproducing example. I'll try to add it during the days.
chart.js version
3.9.1
react-chartjs-2 version
4.3.1
Possible solution
Either of the following
- Remove
/* #__PURE__ */from those lines to explicitly tell about the side effects. - Remove the register command for each chart (probably only with major version bump)
Note: regarding both possible solutions, I cannot say if they cause problems somewhere else.
Source: reactchartjs/react-chartjs-2