CODEWITHSUNDEEP
javascriptvue.jsvuejs2chart.js
wonder95
wonder95

Reputation: 4255

"TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor"

I'm attempting to use Chart.js v3.3.2 in a Vue component (by itself, since I need to use a plugin that requires v3), and I'm following the directions and a blog post , but I'm getting the following error:

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

The relevant code (just trying to get it working initially) is this:

<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 is the default export from the library, so it doesn't look like I need to destructure in my import. Is this a bug, or am I doing something wrong?

Upvotes: 3

Views: 2076

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

According to the official docs in this section you could do:

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

Upvotes: 4

Related Questions