Error in nextTick: "RangeError: Maximum call stack size exceeded"

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]

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

[phanchanra]

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