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.
Jun 20, 2016
4
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>
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.