Uncaught TypeError: Cannot set properties of undefined (setting 'render')

Question

I am trying another way to make graphs for some reports, for that I am using ChartJs, vue, axios and the information in my database. I have reviewed the code and followed the points that the error points out but I have not been able to solve it, here is the code:

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

<script>
import VueChartJs from 'vue-chartjs'
import Chart from 'chart.js'
import Vue from 'vue'

Vue.component('chart',{
  extends:VueChartJs.Pie,
  data(){
    return{
      etiquetas: [],
      stock: [],
      bgColors: ['#5DB3E2', '#5DE2C1 ', '#C0E25D '],
    }
  },
  mounted(){
    this.mostrar()
    this.renderChart({
      labels: this.etiquetas,
      datasets: [
        {
          label:'Graficos',
          backgroundColor: this.bgColors,
          data: this.stock
        }
      ]
    }, {responsive:true, maintainAspectRadio:false})
  },
  methods:{
    mostrar(){
      axios.get('http://localhost:4000/users')
      .then(response => {
        response.data.forEach(element => {
          this.etiquetas.push(element.position)
          this.stock.push(element.id)
        });
      })
    }
  }
})

</script>

This is the whole error:

Uncaught TypeError: Cannot set properties of undefined (setting 'render')
    at normalizeComponent (componentNormalizer.js?2877:24)
    at eval (Reports.vue?ab61:8)
    at Module../src/views/Reports.vue (app.js:1836)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?a18c:1)
    at Module../src/router/index.js (app.js:1716)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:13)

I am very grateful for your help in solving this problem.

Answer 1

It looks like you are not exporting Vue component definition properly. Try to add export default {