Vue-chartjs: Error in nextTick: "RangeError: Maximum call stack size exceeded"

[ssuess]

Expected Behavior

Followed your example exactly, and expected to see an example chart.

Actual Behavior

get a blank page and the error message: Error in nextTick: "RangeError: Maximum call stack size exceeded"

This happens whether I route to the component alone, or try to include it in a parent vue. I notice that when installing via npm, there is an unmet peer dependency of vue 2.4.2 (I have 2.3.4 for compatibility reasons with quasar), but even upgrading vue to that version results in the same error.

Environment

• vue.js version: 2.3.4 (also tried with 2.4.2)
• vue-chart.js version: 2.8.2
• npm version: 4.2.0
• quasar version: 0.14.0

Code

Here is the exact code of my Barchar.vue file:

<template>
<bar-chart></bar-chart>
</template>
<script>
import {Bar} from 'vue-chartjs'

export default Bar.extend({
  name: 'BarChart',
  components: {
    Bar
  },
  data () {
    return {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    }
  },
  mounted () {
    console.log(this.datacollection)
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
})
</script>

<style>
</style>

Also tried multiple variations of component export or not components: { 'bar-chart': Bar }, components: { Bar }, naming or not name: BarChart etc, with no difference to blank page except that the error would change to Error in mounted hook: "TypeError: Cannot read property 'getContext' of undefined"

[ssuess]

UGH. Of course I just found the answer here: remove the template tags...

[ssuess]

Btw, I think this is a CRITICAL thing to mention in the docs, I spent a long time trying to figure it out.

[apertureless]

The unmet peerDependency is only a notice.
I try to keep up with the latest vue releases. But as it is a peerDependency only, you are free to install the version you like. And it should work no matter what.

And the error in mounted hook: "TypeError: Cannot read property 'getContext' of undefined" is because there is no merge strategy in vue for templates. Only for props/data/methods etc. if you extend it.

I will add a section in the docs. ✌️

[Quadriphobs1]

I just noticed that at time when using non-valid HTML tags it might cause this as well

[phanchanra]

The same problem, Even if I delete the template, an error will still occur. TypeError: Cannot read property 'getContext' of undefined