“TypeError：chart_js__WEBPACK_IMPORTED_MODULE_9__.default 不是構造函數”

Question

我正在嘗試在 Vue 組件中使用 Chart.js v3.3.2（單獨使用，因為我需要使用需要 v3 的插件），並且我正在按照說明和博客文章進行操作，但出現以下錯誤：

Error in mounted hook: "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor"

相關代碼（只是試圖讓它最初工作）是這樣的：

<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

根據本節中的官方文檔，您可以執行以下操作：

最后，有一條單獨的路徑可以在一行中為您完成上述操作：
import Chart from 'chart.js/auto'