ChartJS Error when I'm not even using it in my project


Topic: ChartJS Error when I'm not even using it in my project

digitalmanagerguru pro premium asked 2 years ago

When I force one component with a dynamic v-for to re-render, using the key attribute:

<force-render :key="componentKey"></force-render>

I start having the console full of errors: TypeError: this.data.map is not a function TypeError: this.data.find is not a function

And it comes from chartJS:

/*!
 * chartjs-plugin-datalabels v0.7.0
 * https://chartjs-plugin-datalabels.netlify.com
 * (c) 2019 Chart.js Contributors
 * Released under the MIT license
 */

To be exact on this method:

methods:{setSelected:function(){this.selectedItems=this.data.map((function(t,e){return t.index=e,t}))

and this:

,maxHeight:function(){var t=this.data.find((function(t){return t.secondaryText}))

I'm not doing tree shaking. I am thinking on doing it to see if it solves it. But in any case, this shouldnt happen.

best regards


Mikołaj Smoleński staff commented 2 years ago

Thanks for reporting this issue. We didn't test all our components for force rendering. We will check charts and try to find the solution soon. Best regards


digitalmanagerguru pro premium answered 2 years ago

I dig more on this problem and found out that the problem comes after all from mdbSelect:

const secondary = this.data.find(el => el.secondaryText);

Should have at least a verification if this.data is an array or not.

Something as:

if(!!this.data.length) {
      const secondary = this.data.find(el => el.secondaryText);
      }

And the same here:

this.selectedItems = this.data
        .map((option, i) => {
          option.index = i;
          return option;
        })
        .filter(option => option.selected)
        .map(option => option.index);

it needs the same validation on the this.data

Best regards


Mikołaj Smoleński staff commented 2 years ago

Thanks for update. We're still having the issue on our bug list. Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.6.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10 Pro
  • Provided sample code: No
  • Provided link: No