Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

EmilMoe's avatar
Level 10

TypeError: _gauge2.default is not a constructor

I'm trying to wrap this gauge http://bernii.github.io/gauge.js/ in a Vue component, but Vue gives me the error: TypeError: _gauge2.default is not a constructor

I'm not sure why, I follow the same procedure as for ChartJS which works fine.

My Gauge.vue looks like this:

<template>
    <canvas></canvas>
</template>

<script>
    import Gauge from './gauge.js/dist/gauge.js';

    export default {
        props: {
            max: {
                type: Number,
                default: 100
            },

            value: {
                type: Number,
                default: 50,
                twoWay: true,
                required: true
            }
        },

        data() {
            return {
                gauge: null
            }
        },

        computed: {
            options() {
                return {
                    lines: 12, // The number of lines to draw
                    angle: 0.15, // The length of each line
                    lineWidth: 0.44, // The line thickness
                    pointer: {
                        length: 0.9, // The radius of the inner circle
                        strokeWidth: 0.035, // The rotation offset
                        color: '#000000' // Fill color
                    },
                    limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
                    colorStart: '#6FADCF',   // Colors
                    colorStop: '#8FC0DA',    // just experiment with them
                    strokeColor: '#E0E0E0',   // to see which ones work best for you
                    generateGradient: true
                };
            }
        },

        ready() {
            this.gauge = new Gauge(this.$el).setOptions(this.options);
            this.gauge.maxValue = this.max;
            this.gauge.animationSpeed = 32;
            gauge.set(this.value);
        }
    }
</script>

<style lang="scss">

</style>
0 likes
4 replies
EmilMoe's avatar
Level 10

I think I need to know more about, how the import works? I can see ChartJS I just use import Chart from 'chart.js'; Somehow it auto-discovers which file it needs. ChartJS is a NPM package, Gauge.js isn't.

EmilMoe's avatar
Level 10

I changed to this import {Gauge} from './gauge.js/dist/gauge.js';

Can someone explain me why it needs { }?

d3xt3r's avatar
d3xt3r
Best Answer
Level 29

Its all about what the module exports.

import Gauge from './gauge.js/dist/gauge.js'; will work if it exports something as default. Whereas in the file i see

module.exports?module.exports={Gauge:g,Donut:f,BaseDonut:d,TextRenderer:i}:

so you will need to explicitly import it

1 like

Please or to participate in this conversation.