vite vue ts build errors

[ralpheichelberger]

Hello Ghiura Alexandru!

could you please support vite with vue ts - because thats the recommended way to start a vue3 project now.

It works fine with development server (npm run dev) but can't build it:

If you make a brand new vite vue ts project like so:
ralph@centauri:~/testspace$ npm create vite@latest my-vue-app --template vue
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in /home/ralph/testspace/my-vue-app...

Done. Now run:

cd my-vue-app
npm install
npm run dev

And then add your example "Linechart.vue" from your website, plug it in the Helloworld.vue and compile it like this:

ralph@centauri:~/testspace/my-vue-app$ npm run build

[email protected] build
vue-tsc --noEmit && vite build

node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:1:71 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { ChartAxis, ChartConfig, Data, Direction, Margin, Size } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Layer/index.vue.d.ts:1:27 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { LayerType } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Line/index.vue.d.ts:1:23 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { Point } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/components/Treemap/index.vue.d.ts:1:30 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

1 import { Margin, Size } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/hooks/useBars.d.ts:2:27 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

2 import { Rectangle } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/hooks/useChart.d.ts:1:23 - error TS2307: Cannot find module '@/models' or its corresponding type declarations.

1 import { Chart } from '@/models';
~~~~~~~~~~

node_modules/vue3-charts/dist/hooks/usePoints.d.ts:2:23 - error TS2307: Cannot find module '@/types' or its corresponding type declarations.

2 import { Point } from '@/types';
~~~~~~~~~

node_modules/vue3-charts/dist/types/index.d.ts:1:27 - error TS7016: Could not find a declaration file for module 'd3-axis'. '/home/ralph/testspace/my-vue-app/node_modules/d3-axis/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-axis if it exists or add a new declaration (.d.ts) file containing declare module 'd3-axis';

1 import type { Axis } from 'd3-axis';
~~~~~~~~~

node_modules/vue3-charts/dist/types/index.d.ts:2:29 - error TS7016: Could not find a declaration file for module 'd3-shape'. '/home/ralph/testspace/my-vue-app/node_modules/d3-shape/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-shape if it exists or add a new declaration (.d.ts) file containing declare module 'd3-shape';

2 import { PieArcDatum } from 'd3-shape';
~~~~~~~~~~

Found 9 errors in 8 files.

Errors Files
1 node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Layer/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Line/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/components/Treemap/index.vue.d.ts:1
1 node_modules/vue3-charts/dist/hooks/useBars.d.ts:2
1 node_modules/vue3-charts/dist/hooks/useChart.d.ts:1
1 node_modules/vue3-charts/dist/hooks/usePoints.d.ts:2
2 node_modules/vue3-charts/dist/types/index.d.ts:1

[ghalex]

Hi @ralpheichelberger,

I will take a look at this week and get back with an answer.

Thanks,
Alexandru

[ghalex]

Hi @ralpheichelberger,

I have been following your steps and it works fine for me, I could not reproduce your error, build & dev works fine.
https://ibb.co/nCV3hnf

Here are my dependencies:

"dependencies": {
    "vue": "^3.2.25",
    "vue3-charts": "^1.1.31"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }

My app:

<script lang="ts">
import { defineComponent } from 'vue'
import Chart from './components/Chart.vue'

export default defineComponent({
  name: 'App',
  components: { Chart },
  setup() {

  }
})
</script>

<template>
  <div class="coinainer">
    <Chart />
  </div>
</template>

and the chart:

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

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Line :dataKeys="['name', 'pl']" />
    </template>

  </Chart>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'

const plByMonth = [
  { name: 'Jan', pl: 1000, avg: 500, inc: 300 },
  { name: 'Feb', pl: 2000, avg: 900, inc: 400 },
  { name: 'Apr', pl: 400, avg: 400, inc: 500 },
  { name: 'Mar', pl: 3100, avg: 1300, inc: 700 },
  { name: 'May', pl: 200, avg: 100, inc: 200 },
  { name: 'Jun', pl: 600, avg: 400, inc: 300 },
  { name: 'Jul', pl: 500, avg: 90, inc: 100 }
]

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
    })

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

can you try again and make sure you have the latest vue3-charts version.

Thanks,
Alexandru

[ralpheichelberger]

Hello Alexandru!

your example works alright. But if I want to integrate it in to my app it fails to build again.
I have now updated all libraries and still can't build the project without those very same errors.
How can find the problem? There must be a difference, but I really can't see it.
Any hint?
package.json:
{
"name": "backoffice",
"version": "0.1.2",
"scripts": {
"serve": "vite preview",
"build": "vue-tsc --noEmit && vite build",
"dev": "vite --host"
},
"dependencies": {
"axios": "^0.24.0",
"dexie": "^3.2.0",
"jose": "^4.3.7",
"material-design-icons-iconfont": "^6.1.1",
"normalize.css": "^8.0.1",
"sass": "^1.45.1",
"vue": "^3.2.26",
"vue-class-component": "^8.0.0-rc.1",
"vue-router": "^4.0.12",
"vue3-charts": "^1.1.31",
"vuestic-ui": "^1.4.0-alpha1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"pug-loader": "^2.4.0",
"sass-loader": "^12.4.0",
"typescript": "^4.5.4",
"vite": "^2.9.7",
"vue-cli-plugin-vuestic-ui": "^1.0.5",
"vue-tsc": "^0.34.11"
}
}

every else is ident with yours

[mdodsworth]

I was running into the same issue. Looks like the generated types keep the @/types alias which then can't be resolved.

See this issue describing the problem and the workaround - ezolenko/rollup-plugin-typescript2#201