vue-chartjs报错无法解构mixins的reactiveProp属性排查

报错的核心原因是版本不兼容：你本地通过npm默认安装的是v4及以上版本的vue-chartjs，该版本针对Vue3重构了全部API，已经移除了mixins导出，也不再支持旧版extends: 图表组件的类继承写法。你参考的是适配Vue2的v3版本文档示例，代码中尝试从vue-chartjs解构不存在的mixins属性，自然会拿到undefined，触发解构类型错误。
删除package-lock.json重装依赖不会解决问题，因为不指定版本号的前提下，npm始终会拉取最新的不兼容大版本。

根据你项目使用的Vue版本，二选一即可：

方案1：项目使用Vue2，降级到兼容版本 #

1. 卸载当前不兼容的依赖版本

npm uninstall vue-chartjs chart.js

2. 安装适配Vue2的对应版本

npm install vue-chartjs@3.5.1 chart.js@2.9.4

注意：v3版本的vue-chartjs最高仅支持chart.js v2，不可安装chart.js v3+版本，否则会触发其他兼容报错

3. 重启本地开发服务，原有Example.vue、Line.js的代码无需任何修改即可正常运行。

方案2：项目使用Vue3，按新版API改写代码 #

v4+版本的vue-chartjs移除了自定义mixin、继承封装的写法，组件默认内置响应式能力，直接引入注册即可使用，无需单独封装Line.js文件：

1. 确保安装的是适配Vue3的依赖版本

npm install vue-chartjs chart.js

2. 改写Example.vue代码，直接引入官方Line组件并注册chart.js所需模块

<template>
  <div>
    <div class="small">
      <Line :data="datacollection" :options="chartOptions"></Line>
      <button @click="fillData()">Randomize</button>
    </div>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'

// 注册chart.js必需的功能模块
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

export default {
  components: { Line },
  data () {
    return {
      datacollection: null,
      chartOptions: { responsive: true }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [this.getRandomInt(), this.getRandomInt()]
          }, {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

内容的提问来源于stack exchange，提问作者Spartak Borisov