vue-bulma / canvas-gauges

Vue Canvas Gauges is based on Canvas gauges for Vue
MIT License
49 stars 11 forks source link

Incompatible with standard vue-cli webpack build #2

Open ctoLarsson opened 7 years ago

ctoLarsson commented 7 years ago

I really like this project, unfortunately it seems incompatible with a standard vue-cli built project. Replicate:

vue init webpack my-project npm install vue-canvas-gauges --save

add the include from readme: import { LinearGauge, RadialGauge } from 'vue-canvas-gauges'

=> doesn't compile, I suppose some incompatibility with the webpack config. Hope can be fixed.

daniel-shuy commented 7 years ago

I had the same issue.

Digging into the source code, I figured out the issue is due to index.js using module.exports, which is ES5 syntax; together with import, which is ES6 syntax, which is no longer allowed in Webpack version 2.2.0-rc.5 onwards (see webpack/webpack#3997).

The temporary workaround is to explicitly import from LinearGauge.vue/RadialGauge.vue, eg:

<template>
  <div>
    <RadialGauge :options="{ value: 233 }"></RadialGauge>
    <LinearGauge :value="377"></LinearGauge>
  </div>
</template>

<script>
import LinearGauge from 'vue-canvas-gauges/src/LinearGauge'
import RadialGauge from 'vue-canvas-gauges/src/RadialGauge'

export default {
  // ...
  components: {
    LinearGauge,
    RadialGauge
  }
}
</script>