为什么 nuxt 用 vue-chartjs 给我这个错误?

2022-01-22 00:00:00 charts javascript vue.js chart.js vuejs2

我在尝试使 vue-chartjs 工作时收到此错误

./node_modules/vue-chartjs/es/BaseCharts.js 中的

 WARN在chart.js"中找不到导出默认"(导入为图表")

还有这个在 devtools 中:

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default 不是构造函数

重建步骤:

使用以下命令创建 nuxt 应用:$ yarn create nuxt-app <project_name>
用 $ yarn add vue-chartjs chart.js 添加 vue-chartjs
根据 vue-chartjs 文档添加以下代码

~/components/BarChart.js

从 'vue-chartjs' 导入 { Bar }导出默认{延伸:酒吧，道具:['数据'，'选项']，挂载(){this.renderChart(this.data, this.options)},}

~/pages/index.vue

<模板><div 类=容器">
<条形图:data="barChartData";:options="barChartOptions";:高度=200"/></div></div></模板><脚本>导出默认{数据() {返回 {条形图数据:{标签: ['2019-06','2019-07','2019-08','2019-09','2019-10','2019-11','2019-12','2020-01','2020-02','2020-03','2020-04','2020-05',],数据集:[{标签:访问"，数据:[10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],背景颜色:'#003f5c',},{label: '页面浏览量',数据:[30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],背景颜色:'#2f4b7c',},{标签:'用户'，数据:[45、65、30、53、34、35、26、37、34、45、67、87、98]，背景颜色:'#665191',},],},条形图选项:{响应式:真实，传奇: {显示:假，},标题: {显示:真，text: '谷歌分析数据',字体大小:24，fontColor: '#6b7280',},工具提示:{背景颜色:'#17BF62',},秤:{x轴:[{网格线: {显示:假，},},],y轴:[{滴答声:{beginAtZero:是的，},网格线: {显示:假，},},],},},}},}</脚本><风格>/* 使用 Tailwind CSS 的示例 `apply` at-rules.容器 {@apply min-h-screen flex justify-center items-center text-center mx-auto;}*/.容器 {边距:0 自动；最小高度:100vh；显示:弯曲；证明内容:中心；对齐项目:居中；文本对齐:居中；}.标题 {字体系列:'流沙'，'Source Sans Pro'，-apple-system，BlinkMacSystemFont，'Segoe UI'，Roboto，'Helvetica Neue'，Arial，无衬线；显示:块；字体粗细:300；字体大小:100px；颜色:#35495e；字母间距:1px；}.subtitle {字体粗细:300；字体大小:42px；颜色:#526488；字间距:5px；底部填充:15px；}.链接{填充顶部:15px；}</风格>

我也在项目中使用tailwindcss，其他nuxt项目选项有Axios、Git、ESlint、Prettier.

解决方案

Chart.js 有一个新的发布版本，3.0.x.我想，vue-chartjs 还不支持.

您可以降级 chart.js 并重试.

ChartJS [3.0.1 - 2 天前发布]https://www.npmjs.com/package/chart.js?activeTab=readme

大约 22 小时前有一个 vue-chartjs 问题.https://github.com/apertureless/vue-chartjs/issues/695

I get this error while trying to make vue-chartjs work

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

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

And also this in devtools:

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

Steps to recreate:

Create nuxt app with: $ yarn create nuxt-app <project_name>
Add vue-chartjs with $ yarn add vue-chartjs chart.js
Add following code which should work according to vue-chartjs docs

~/components/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>

I am also using tailwindcss in the project and other nuxt project options were Axios, Git, ESlint, Prettier.

解决方案

Chart.js has a new release version with 3.0.x. I think, vue-chartjs does not support it yet.

You can downgrade chart.js and try again.

ChartJS [3.0.1 - Published 2 days ago] https://www.npmjs.com/package/chart.js?activeTab=readme

And there is a vue-chartjs issue about 22 hours ago. https://github.com/apertureless/vue-chartjs/issues/695

相关文章