Chartjs .js and .cjs are both imported when using chartjs-plugin-datalabels

[AoDev]

Summary

Both the .js and .cjs versions of chart.js are imported and bundled when using this plugin.

Libs versions

• chart.js: 4.4.0
• chartjs-plugin-datalabels: 2.2.0
• react-chartjs-2: 5.2.0
• webpack: 5

Description

Both the .js and .cjs versions of chart.js are bundled in my react / typescript app when I use chartjs-plugin-datalabels.
The app is bundled with Webpack 5. I verified that this issue does not happen if I don't import it.

The plugin is imported like so:

import {Chart as ChartJS} from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'

ChartJS.register(ChartDataLabels)

Note that it is specifically the register(...) line that causes the problem.
If I import the plugin but not register it, there is no duplication

Further investigation

I don't know if the problem is chart.js or datalabels so I decided to test with another plugin.

I tried with chartjs-plugin-autocolors and can confirm the duplication issue does not happen.

So, at the moment I decided to write the issue here.

Screenshots

Checked with the BundleAnalyzerPlugin

without chartjs-plugin-datalabels	with chartjs-plugin-datalabels
only .js included	both .cjs & .js included