victorgarciaesgi / vue-chart-3

📊 A simple wrapper around Chart.js 3 for Vue 2 & 3
https://vue-chart-3.netlify.app/
MIT License
309 stars 109 forks source link

Build errors with vite #42

Closed JasonMan34 closed 2 years ago

JasonMan34 commented 2 years ago

Installing (and importing) this package on a clean vue-vite project with typescript causes build errors

Cannot find module 'vue/types/options' or its corresponding type declarations
Cannot find name 'Vue'.
Cannot find module '@vue/composition-api' or its corresponding type declarations.

Relevant dependencies:

{
  "scripts": {
    "build": "vue-tsc --noEmit && vite build",
  },
  "dependencies": {
    "chart.js": "^3.6.0",
    "vue": "^3.2.16",
    "vue-chart-3": "^0.5.10"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0"
  }
}

Minimal reproduction repo - https://github.com/JasonMan34/vite-vue-chart-3-bug

victorgarciaesgi commented 2 years ago

@JasonMan34 No problem for me when running it on codesandbox. What package manager do you use ? Sandbox: https://codesandbox.io/s/vibrant-shannon-8ezs3?file=/package.json

JasonMan34 commented 2 years ago

I use npm (6.14.15)
The npm run dev script runs fine for me too, but running build on the above repository fails on type checking

Looking into it, Vite validates all types with vue-tsc --noEmit before building, and it fails on the types for this package
image

victorgarciaesgi commented 2 years ago

If you have a tsconfig.json, add skipLibCheck:true and reference it in your vue-tsc script. The types comes from vue-demi

JasonMan34 commented 2 years ago

This fixes the issue I had with building (thanks!), but I still have typing issues during development image Any idea on how to resolve this?

victorgarciaesgi commented 2 years ago

I will look into this! Can you try npx vue-demi-switch 3?

JasonMan34 commented 2 years ago

Didn't change anything :x

victorgarciaesgi commented 2 years ago

Can you try 0.5.11? Should be fixed :D

JasonMan34 commented 2 years ago

It's definitely better, vue-tsc errors dropped from 63 to 10. And vscode is fine with the index.d.ts file now, but still has trouble with some of the others

image image image

victorgarciaesgi commented 2 years ago

@JasonMan34 Can you try 0.6.0-alpha.6 ? I prioritized vue 3 types on this version and kept 0.5.x version for vue 2 compatible types. If you are using Volar, you should have type check and autocompletion in props :)

JasonMan34 commented 2 years ago

Typing seems good for components :D
Although there is still an issue when building without skipLibCheck:true

image

victorgarciaesgi commented 2 years ago

Yayyy, the last type error is fixed in 0.6.0-alpha.7 ! Thanks for being reactive :D

JasonMan34 commented 2 years ago

Thanks for making the package ^^
But I'm still getting the error in utils.d.ts in 0.6.0-alpha.7 😅 image

I think the basis of all these errors comes from the fact that when running npm install on this repo (on vue-chart-3 that is), vue 2 gets installed, rather than vue 3, so some typings break when used in a vue 3 project

Would replacing Vue with ComponentPublicInstance be a good solution here?

JasonMan34 commented 2 years ago

Any word on this?

victorgarciaesgi commented 2 years ago

Should be fixed with new version!

JasonMan34 commented 2 years ago

Works fine now, thanks for the support!