Compatibility with Vue 2.1.10

[Robfz]

Expected Behavior

vue-chartjs works with vue@2.1.10.

Actual Behavior

Running vue-chartjs@2.3.2 with vue@2.1.10 results in the application crashing with Uncaught TypeError: Cannot read property 'prototype' of undefined. Rolling back to vue-chartjs@2.2.0 prevents the crash, but the charts are not being rendered.

Complete error stack:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at mergeOptions (eval at <anonymous> (app.js:624), <anonymous>:1360:17)
    at Function.Vue.extend (eval at <anonymous> (app.js:624), <anonymous>:3632:20)
    at eval (eval at <anonymous> (app.js:780), <anonymous>:9:36)
    at Object.<anonymous> (app.js:780)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:1056), <anonymous>:5:19)
    at Object.<anonymous> (app.js:1056)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)

Environment

• OS: Ubuntu 16.04 64-bit (Linux 4.4)
• NPM Version: 3.10.10

Thanks for the support!

[apertureless]

Will look into it.

[apertureless]

Should be fixed now.
Please update to vue-chartjs@2.3.3

[Robfz]

Just updated and the problem persists.

[apertureless]

Can you post your component ?

Are you using a build system ? Webpack1/2, Browserify etc ?

[Robfz]

Sure, this is the component:

<script>
import { Line, reactiveProp } from 'vue-chartjs'

export default Line.extend({
  data: function () {
    return {}
  },

  props: {
    chartData: {
      type: Object
    },

    options: {
      type: Object,
      default: function () {
        return {
          animateScale: true,
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            xAxes: [{
              barThickness: 8,
              categoryPercentage: 0.8,
              barPercentage: 0.9
            }]
          },
          title: {
            display: false,
            text: 'Custom Chart Title',
            fontSize: 24
          }
        }
      }
    }
  },

  mixins: [reactiveProp],

  mounted: function () {
    if (this.chartData) {
      this.renderChart(this.chartData, this.options)
    }
  }
})
</script>

And yes, I am using Webpack 1.14

[apertureless]

Ah gotcha.

The problem is the mixin. Check this out: https://github.com/apertureless/vue-chartjs#reactivity

You have to import { mixins } from 'vue-chartjs' and use it then as mixins: [mixins.reactiveProp]

Or you can make a es6 destructive assign

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

and use it then as reactiveProp.

Also described in the release notes

[Robfz]

Great, problem fixed!

I didn't notice the change of how to import the mixins. Thanks for the help.