nuxt에서 vue-chartjs에서 이 오류가 발생하는 이유는 무엇입니까?

nuxt에서 vue-chartjs에서 이 오류가 발생하는 이유는 무엇입니까?

vue-chartjs를 작동시키려고 하면 이 오류가 나타난다.

 WARN  in ./node_modules/vue-chartjs/es/BaseCharts.js

"export 'default' (imported as 'Chart') was not found in 'chart.js'

또한 devtools에서 다음을 수행합니다.

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

재생성 절차:

1. Nuxt 앱 만들기:$ yarn create nuxt-app <project_name>
2. vue-chartj 추가:$ yarn add vue-chartjs chart.js
3. vue-chartjs 문서에 따라 작동해야 하는 다음 코드 추가

~/컴포넌트/BarChart.js

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props: ['data', 'options'],
  mounted() {
    this.renderChart(this.data, this.options)
  },
}

~/pages/index.vue

<template>
  <div class="container">
    <div>
      <bar-chart
        :data="barChartData"
        :options="barChartOptions"
        :height="200"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barChartData: {
        labels: [
          '2019-06',
          '2019-07',
          '2019-08',
          '2019-09',
          '2019-10',
          '2019-11',
          '2019-12',
          '2020-01',
          '2020-02',
          '2020-03',
          '2020-04',
          '2020-05',
        ],
        datasets: [
          {
            label: 'Visits',
            data: [10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],
            backgroundColor: '#003f5c',
          },
          {
            label: 'Pages Views',
            data: [30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],
            backgroundColor: '#2f4b7c',
          },
          {
            label: 'Users',
            data: [45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],
            backgroundColor: '#665191',
          },
        ],
      },
      barChartOptions: {
        responsive: true,
        legend: {
          display: false,
        },
        title: {
          display: true,
          text: 'Google analytics data',
          fontSize: 24,
          fontColor: '#6b7280',
        },
        tooltips: {
          backgroundColor: '#17BF62',
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
              },
            },
          ],
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
              gridLines: {
                display: false,
              },
            },
          ],
        },
      },
    }
  },
}
</script>

<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
@apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

프로젝트에서도 tailwindcss를 사용하고 있으며 다른 Nuxt 프로젝트 옵션으로는 Axios, Git, ESlint, Pretter가 있습니다.

Chart.js에는 3.0.x의 새로운 릴리스 버전이 있습니다.생각합니다,vue-chartjs는 아직 지원하지 않습니다.

chart.js를 다운그레이드하고 다시 시도할 수 있습니다.

차트 JS [3.0.1 - 이틀 전 공개]https://www.npmjs.com/package/chart.js?activeTab=readme

그리고 또...vue-chartjs약 22시간 전에 발행되었습니다.https://github.com/apertureless/vue-chartjs/issues/695

chart.download 버전이 3.0.0보다 이전 버전과 호환되지 않습니다.chart.download해야 합니다.npm install chart.js@2.9.4

이것으로 문제가 해결되었습니다.

조금 늦은 감이 있지만 제가 답을 드려야 하는데

필요한 것은 두 라이브러리의 버전을 변경하는 것입니다.

npm install chart.js@2.7.1 vue-chartjs@3.4.0 --save

vue2에서는 정상적으로 동작합니다.

yarn add vue-chartjs chart.js@2.9.4

실을 사용한다면

언급URL : https://stackoverflow.com/questions/66940954/why-does-nuxt-give-me-this-error-with-vue-chartjs