LinearScaleBase is not defined - Possible Tree-shaking problem?

[RobDM]

Hi there,

I've run into a really strange problem using a combination of chart.js (4.3.0), chartjs-plugin-datalabels (2.2.0), and vue-chartjs (5.2.0) npm modules, and I'm hoping someone here can help. I've posted in this discussion board because chartjs-plugin-datalabels appears to be the culprit, but I could be wrong.

My code is as follows:

import { Chart as ChartJS, Title, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
import { Bar } from 'vue-chartjs'
ChartJS.register(LinearScale, CategoryScale, Title, Legend, BarElement, ChartDataLabels)

The rest of this Vue component is probably not relevant because the "LinearScaleBase is not defined" error happens on the import of ChartDataLabels (line 2), and things don't go any further.

I don't think it's the order of imports or classes given to ChartJS.register(), because I tried using a dynamic import for ChartDataLabels and registering it with ChartJS on the completion of the promise, and similarly LinearScaleBase was not found.

My only other thought is that it may be a tree-shaking problem because I've noticed the code works without problems on a local webpack-cli serve. We only see the problem with the code when it is built and deployed by our build server, which probably employs more aggressive tree-shaking.

Any thoughts?

[RobDM]

I'm not sure if this is a good solution, but it's the only one I've been able to find so far.

Instead of using the ESM module:
import ChartDataLabels from 'chartjs-plugin-datalabels'

I'm now using the non-ESM module:
import ChartDataLabels from 'chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js'

This seems to avoid the tree-shaking issues I was experiencing, possibly at the expense of not tree-shaking the library at all.