You may need an appropriate loader to handle this file type with Vue and vue-chartjs

Question

I have an application which has other pages working and I am trying to add a page with a chart. To try it out I made changes to include the packages

"dependencies": {
"@aws-amplify/ui-vue": "^0.2.8",
"aws-amplify": "^3.0.18",
"aws-amplify-vue": "^2.1.1",
"slugify": "^1.4.0",
"vue": "^2.5.2",
"chart.js": "^2.9.4",
"vue-chartjs": "^4.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.6.2"

},

I also created a vue file with the following code

<template>
 <Bar
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
 />
</template>



<script>

import { Bar } from 'vue-chartjs/legacy'

import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
  type: String,
  default: 'bar-chart'
},
datasetIdKey: {
  type: String,
  default: 'label'
},
width: {
  type: Number,
  default: 400
},
height: {
  type: Number,
  default: 400
},
cssClasses: {
  default: '',
  type: String
},
styles: {
  type: Object,
  default: () => {}
},
plugins: {
  type: Array,
  default: () => []
}
},
data() {
return {
  chartData: {
    labels: [ 'January', 'February', 'March' ],
    datasets: [ { data: [40, 20, 12] } ]
  },
  chartOptions: {
    responsive: true
  }
  }
  }
  }
 </script>

I followed the examples from here , and varied the versions slightly as suggested in other posts. But in vain and I still getting the error below

ERROR in ./node_modules/vue-chartjs/legacy/index.js Module parse failed: Unexpected token (36:8) You may need an appropriate loader to handle this file type. | }; | setChartDatasets(nextData, { | ...data | }, datasetIdKey);

ERROR in ./node_modules/chart.js/dist/chart.mjs Module parse failed: Unexpected token (7082:12)

Answer 1

fixing versions solved the problem

   "vue": "^2.6.14",
   "chart.js": "^2.9.4",
   "vue-chartjs": "^3.5.1",

Also the code had to be modified for that version, information was available here - https://www.npmjs.com/package/vue-chartjs/v/3.5.1