Uncaught TypeError: Object(...) is not a function の解決について

Question

前提

chart.jsを使用したいため、インストール後に表示させようとするもエラーが出てしまう。

vue-chart.jsのHPより参考して、vue-chart.jsをインストトールしている。

現在のバージョン
"vue": ^2.6.11
"vue-chartjs": "^4.1.1"
"chart.js": "2.9.4"

yarn add vue-chartjs chart.js@2.9.4

発生しているエラー

index.js?368d:85 Uncaught TypeError: Object(...) is not a function
    at generateChart (index.js?368d:85:1)
    at eval (index.js?368d:232:1)
    at ./node_modules/vue-chartjs/dist/index.js (chunk-vendors.js:22240:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/store/Chart.vue?vue&type=script&lang=js&:3:69)
    at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/store/Chart.vue?vue&type=script&lang=js& (app.js:1694:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (Chart.vue?4c7e:1:1)

Index.vueから子Chart.vueを表示させる。
vue-chart.jsを利用したかったが、表示することができずタイトルのエラーが出てしまう。
エラーを解消してグラフを表示させたのですが、エラー解消できません。
どなたかご教授していただければと思います。

Index.vueにChart.vueを表示させる。
コンポーネント： Chart.vue

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data: () => ({
    chartdata: {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),

  mounted () {
    this.renderChart(this.datacollection, this.options)
  }
}
</script>
<style>
</style>

<template>
  <v-container>
    <Chart />
  </v-container>
</template>

<script lang="ts">
import Vue from 'vue'
import Chart from './Chart.vue'

export default Vue.extend({
  name: 'Index',
  components: {
    Chart
  },
  data () {
    return {
      counter: 0,
      btnName: '追加',
      chartData: {
        labels: [],
        // データ詳細
        datasets: [
          {
            label: 'データ',
            data: []
          }
        ]
      },
      options: {
      },
      addFlag: false
    }
  }
})
</script>
<style scoped>
</style>

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'

Vue.config.productionTip = false


new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Comments

[y_waiwai]

エラーが出たなら、エラーメッセージを提示しましょう
エラーメッセージは、よけいな省略翻訳しないで出たそのママをコピペで提示してください