Vue项目用vue-chartjs开发时报Cannot set properties of undefined错误如何解决

错误原因及修复方案 #

1. 单文件组件结构错误

Vue单文件组件的script部分必须默认导出一个组件配置对象，你原代码没有export default，直接在script内执行全局组件注册，导致webpack的组件解析器报错，这是你当前报错栈指向componentNormalizer.js的直接原因。

2. 依赖版本不兼容

你当前报错的核心原因是vue-chartjs和chart.js版本不匹配，Vue2环境下对应的兼容版本组合为：vue-chartjs 3.x + chart.js 2.x，如果你安装了更高版本的chart.js（3.x/4.x）就会触发Cannot set properties of undefined (setting 'render')错误。
先执行命令重装匹配版本：

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

3. 缺少Axios导入

代码中直接调用axios.get但没有导入axios，需要在script头部添加导入语句，如果你是全局挂载的axios可以跳过这步，否则添加：

import axios from 'axios'

4. 异步请求时序错误

mostrar方法是异步请求，你在mounted中调用后立即执行renderChart，此时接口还未返回数据，图表会渲染为空，且后续数据更新不会自动刷新图表，需要把renderChart的调用放到接口请求成功的回调中。

5. 配置项拼写错误

渲染配置中的maintainAspectRadio拼写错误，正确写法为maintainAspectRatio。

6. 组件注册逻辑不规范

你在单文件页面组件内全局注册chart组件不符合Vue开发规范，建议把图表逻辑注册为当前页面的局部组件。 #

完整修正后代码 #

<template>
  <div>
    <br>
    <br>
    <chart></chart>
    <br>
    <br>
  </div>
</template>

<script>
import VueChartJs from 'vue-chartjs'
import axios from 'axios'

export default {
  components: {
    chart: {
      extends: VueChartJs.Pie,
      data() {
        return {
          etiquetas: [],
          stock: [],
          bgColors: ['#5DB3E2', '#5DE2C1 ', '#C0E25D '],
        }
      },
      mounted() {
        this.mostrar()
      },
      methods: {
        mostrar() {
          axios.get('http://localhost:4000/users')
            .then(response => {
              response.data.forEach(element => {
                this.etiquetas.push(element.position)
                this.stock.push(element.id)
              })
              // 数据获取完成后再渲染图表
              this.renderChart({
                labels: this.etiquetas,
                datasets: [
                  {
                    label: 'Graficos',
                    backgroundColor: this.bgColors,
                    data: this.stock
                  }
                ]
              }, { responsive: true, maintainAspectRatio: false })
            })
        }
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Melissa Fuentes Cañar