Startup issue

[jcbuisson]

Hello! Your lib seems very interesting to me. However I cannot run even the doc front page example:

• I create a vue 3 project with vue-cli (version @vue/cli 4.5.15)
• I replace App.vue by:

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Line :dataKeys="['name', 'pl']" />
      <Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          name: { hide: true },
          pl: { color: '#0077b6' },
          avg: { label: 'averange', color: 'red' },
          inc: { hide: true }
        }"
      />
    </template>

  </Chart>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'
import { plByMonth } from '@/data'

export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

    const axis = ref({
      primary: {
        type: 'band',
        format: (val: string) => {
          if (val === 'Feb') {
            return '😜'
          }
          return val
        }
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })

    return { data, direction, margin, axis }
  }
})
</script>

• I add the file src/data/plByMonth.js

When I run npm run serve, I get the error:

 ERROR  Failed to compile with 1 error                                                                                  3:19:25 PM

 error  in ./node_modules/vue3-charts/dist/vue3-charts.esm.js

Module parse failed: Unexpected token (6953:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ]),
|       createElementVNode("g", _hoisted_4$3, [
>         (!_ctx.axis?.primary?.hide)
|           ? (openBlock(), createBlock(_component_axis, {
|               key: 0,

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/patient/PatientMeasurements.vue?vue&type=script&lang=js 6:0-48 21:11-16 22:10-14 23:10-14
 @ ./src/views/patient/PatientMeasurements.vue?vue&type=script&lang=js
 @ ./src/views/patient/PatientMeasurements.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[pvanagtmaal]

Hi! Could you try to add this to your vue.config.js?

module.exports = {
  // other stuff
  chainWebpack: (config) => {
      config.module
        .rule('supportChaining')
        .test(/\.js$/)
        .include
        .add(path.resolve('node_modules/vue3-charts'))
        .end()
        .use('babel-loader')
        .loader('babel-loader')
        .tap(options => ({
          ...options,
          plugins: ['@babel/plugin-proposal-optional-chaining']
        }))
        .end()
    }
  }

And of course install @babel/plugin-proposal-optional-chaining if you're not using @babel/present-env :)

See the Babel website for more

[jcbuisson]

It works, thank you!