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>

- 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!