I created a Vue.js project with vue-chartjs. I tried reinstalling the library, however I still got this error:
error in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: Unexpected token (6613:12)
You may need an appropriate loader to handle this file type.
| if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
| decimated.push({
| ...data[intermediateIndex1],
| x: avgX,
| });
@ ./node_modules/vue-chartjs/es/BaseCharts.js 1:0-29
@ ./node_modules/vue-chartjs/es/index.js
App.vue:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
import moment from "moment";
import LineChart from "./components/LineChart";
export default {
name: "App",
components: {
LineChart
},
}
LineChart.vue
<script>
import { Line } from "vue-chartjs";
export default {
extends: Line,
props: {
label: {
type: String
},
chartData: {
type: Array
},
options: {
type: Object
},
},
mounted() {
const dates = this.chartData.map(d => d.date).reverse();
const totals = this.chartData.map(d => d.total).reverse();
this.renderChart(
{
labels: dates,
datasets: [
{
label: this.label,
data: totals
}
]
},
this.options
);
}
};
</script>
........................................................................................................................................................................................................................................................................................................................
High chance you installed chartjs version 3. The vue wrapper is incompatibele with this version of chart.js and only supports the older version 2.
If you downgrade to version 2.9.4 by changing the version number in your package.json to 2.9.4 and run your install command again or remove the package and use the command install chart.js@2.9.4
. This will most likely resolve your issue