javascript - "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor"

Question

我正在尝试在 Vue 组件中使用 Chart.js v3.3.2(单独使用，因为我需要使用需要 v3 的插件)，并且我正在按照说明和 blog post 进行操作。 ，但我收到以下错误:

安装钩子(Hook)时出错:“TypeError:chart_js__WEBPACK_IMPORTED_MODULE_9__.default不是构造函数”

相关代码(只是想让它最初工作)是这样的:

<template>
    <canvas id="myChart" />
<template>

<script>
import Chart from 'chart.js'

export default {
    mounted() {
            const ctx = document.getElementById('myChart');
            const stars = [135850, 52122, 148825, 16939, 9763];
            const frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: frameworks,
                    datasets: [
                        {
                            label: "Github Stars",
                            data: stars,
                            backgroundColor: "rgba(255, 99, 132, 0.2)",
                            borderColor: "rgba(255, 99, 132, 1)",
                            borderWidth: 1
                        }
                    ]
                }
            })

    }

}

Chart 是库的默认导出，因此看起来我不需要在导入中进行解构。这是一个错误，还是我做错了什么？

Answer 1

根据官方文档section你可以这样做:

And finally there is an separate path to do just the above for you, in one line:
import Chart from 'chart.js/auto'