ghalex
commented
2 years ago Hi @ralpheichelberger,
I will take a look at this week and get back with an answer.
Thanks, Alexandru
Closed ralpheichelberger closed 1 year ago
ghalex
commented
2 years ago Hi @ralpheichelberger,
I will take a look at this week and get back with an answer.
Thanks, Alexandru
ghalex
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago 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 - https://github.com/ezolenko/rollup-plugin-typescript2/issues/201
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
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/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/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/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: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-shapeif it exists or add a new declaration (.d.ts) file containingdeclare module 'd3-shape';2 import { PieArcDatum } from 'd3-shape';