Syntax error : Cannot use import statement outside a module in Vue2 chart js

Question

Using version) Vue2 : 2.6.14, chart.js : 2.9.4, vue-chartjs : 4.1.0, nuxtjs/vuetify: 1.12.3

components\BarChart.vue

<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 type="module">
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
import { Bar } from 'vue-chartjs/legacy'

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: Object,
      default: () => {}
    },
    chartData: {
      labels: [ 'January', 'February', 'March' ],
      datasets: [ { data: [40, 20, 12] } ]
    },
    chartOptions: {
      responsive: true
    }
  },
  data() {
    return {
      
    }
  }
}
</script>

When try "npm run dev" Syntax error : Cannot use import statement outside a module has occurred

When install chart.js 3.7.1 version and change code

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

has same error.

What should I do..?

Both imports are wrong, V2 has no treeshaking and thus no named exports, it only exports the default chart. For v3 the auto package also does not provide any named exports only the default one — LeeLenalee, May 23 '22 at 09:27
Finally I solve it. Delete below code and referece this URL. https://stackoverflow.com/questions/66940954/why-does-nuxt-give-me-this-error-with-vue-chartjs ` import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) ` — WJK, May 23 '22 at 10:45

score 1 · Answer 1 · edited May 24 '22 at 00:58

1

Finally I solve it. Delete below code and referece this URL. Why does nuxt give me this error with vue-chartjs?

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

edited May 24 '22 at 00:58

kissu

40,416
14
65
133

answered May 24 '22 at 00:57

WJK

41
7

Syntax error : Cannot use import statement outside a module in Vue2 chart js

1 Answers1