[Bug]: Tree shaking not working?

[NekiKulLik]

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

I'm using Nuxt version 2.15.8

When I check the size of import using nuxt build --analyze, it is always ~400KB stat size no matter how I import the libraries.

My vue-chartjs.plugin.js file:

import Vue from 'vue'
import { Scatter } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement
} from 'chart.js'

export default () => {
  ChartJS.register(
    Title,
    Tooltip,
    Legend,
    PointElement,
    BarElement,
    CategoryScale,
    LinearScale,
    LineElement
  )

  Vue.component('ScatterChart', {
    extends: Scatter
  })
}

It is imported in nuxt.config.js like this:

  plugins: [
   ...
    { src: '~/plugins/vue-chartjs.plugin.js', ssr: false, mode: 'client' }
  ],

This is how it looks when running analyze:

I thought according to this reference I'd get tree shaking by importing the modules like this (instead of taking all registerables). But no matter how I import the size remains the same. Am I missing something? Thanks!

Reproduction

https://github.com/NekiKulLik/treeshake-demo

chart.js version

3.9.1

vue-chartjs version

4.1.1

Possible solution

No response

[apertureless]

Does this also happen if you just use native chart.js? We do not bundle chart.js in vue-chartjs, so maybe it is an issue with chart.js or nuxt webpack config.

[dangreen]

@NekiKulLik Hi. It's known Chart.js issue https://github.com/chartjs/Chart.js/issues/10163

Will fixed in Chart.js v4.

[dangreen]

vue-chartjs v5 with Chart.js v4 support was released

[NekiKulLik]

@dangreen Hmm I see. Can you pls confirm that newest vue-chart.js version 5 is compatible with Nuxt? I updated the repo I linked before with new vue-chartjs and chart.js - repo has the reproducible issue. The error I get is related to loader:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|             const ref = shallowRef(null);
|             const reforwardRef = (chartRef)=>{
>                 ref.value = chartRef?.chart;
|             };
|             expose({

Seems like optional chaining operator is causing loading problems even though it works in all components. I tried adding vue-template-compiler in nuxt config but no luck.

[dangreen]

@NekiKulLik Hi. What version of the webpack do you use?

[NekiKulLik]

@dangreen Hello! webpack v4.46. I believe v5 is still not compatible with nuxt v2 (will probably never be?) . I will check just to be completely sure.

[dangreen]

@NekiKulLik Chart.js itself will not work with Webpack 4 due to it doesn't support class static fields. You can configure babel-loader to transpile these packages.

[NekiKulLik]

@dangreen Yeah, I added the following in nuxt.config

build: {
    transpile: [
      'chart.js',
      'vue-chartjs',
    ]
}

But seems the same. Is there a step I am missing?

[dangreen]

@NekiKulLik Sorry, but I don't have experience with nuxt

[NekiKulLik]

@dangreen Thanks. Actually I'm pretty sure https://github.com/chartjs/Chart.js/pull/11037 solves my problem perfectly. Will wait for the release