vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.88k stars 407 forks source link

v2.0.22 regression on uni-app projects #4501

Closed ModyQyW closed 3 months ago

ModyQyW commented 5 months ago

Vue - Official extension or vue-tsc version

v2.0.22

VSCode version

v1.90.2

Vue version

v3.4.30

TypeScript version

v5.5.2

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 33.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - ~/.local/state/fnm_multishells/62229_1719280277494/bin/node
    npm: 10.5.0 - ~/.local/state/fnm_multishells/62229_1719280277494/bin/npm
    pnpm: 9.4.0 - ~/.local/state/fnm_multishells/62229_1719280277494/bin/pnpm
    bun: 1.1.16 - /opt/homebrew/bin/bun
    Watchman: 2024.06.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 126.0.6478.115
    Safari: 17.5

Steps to reproduce

  1. Pull the project and install dependencies.
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
cd my-vue3-project
npx taze@latest major -fw
npm install @uni-helper/uni-app-types@0.5.13 -D
  1. Update tsconfig.json as follow.
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types", "@uni-helper/uni-app-types"]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
  1. Reload VSC window.

  2. Check src/pages/index/index.vue and find out the types are lost.

image

Link to minimal reproduction

/

Any additional comments?

I can confirm that v2.0.21 is fine, so that it may be caused by v2.0.22 https://github.com/vuejs/language-tools/pull/4492. If you guys can help me and point out how @uni-helper/uni-app-types should be tweaked, I'd appreciate it. Always thank you very much for the work you do! 🙏

image
skywalker512 commented 5 months ago

I think the deletion here caused this issue. The ts file I used below can solve some problems.


type A = import('@vue/runtime-core').GlobalComponents;

declare module 'vue' {
  interface GlobalComponents extends A {}
}
zzh948498 commented 5 months ago

I think the deletion here caused this issue. I can temporarily solve this problem by configuring it like this.

"vueCompilerOptions": {
    "lib": "@vue/runtime-core",
},

Thank you for your help, but there are still some problems. I will use the following code as an example

<el-button type="success" size="a">Success</el-button>
  1. I can't use ctrl+left click type to enter the type declaration file
  2. The type is not checked, because the size="a" I entered is obviously wrong, and there is no red prompt
skywalker512 commented 5 months ago

@zzh948498

If you are using pnpm, you need to install @vue/runtime-core.

zzh948498 commented 5 months ago

@vue/runtime-core

Sorry I didn't describe it clearly. The global type is indeed loaded successfully image But some features are missing, as I described above

This is the result of my rollback to v2.0.21 : image

RayGuo-ergou commented 5 months ago

If you are using pnpm, you need to install @vue/runtime-core.

Just want to provide a better solution i found, create a .npmrc then add public-hoist-pattern[]=@vue/runtime-core

Note: If in mono repo, it will only work in the root level.

so1ve commented 5 months ago

I think the deletion here caused this issue. The configuration I used below can solve some problems, but the props check failed.

"vueCompilerOptions": {
    "lib": "@vue/runtime-core",
},

Unfortunately, the deletion is intentional since TS 5.5 introduced some internal changes that make the old approach to detect if a module/type exists no longer work in TS 5.5.

skywalker512 commented 5 months ago

But some features are missing, as I described above

@zzh948498 I'm sorry I didn't conduct a complete investigation. I have updated the new solution, and it seems to work fine for me.

type A = import('@vue/runtime-core').GlobalComponents;

declare module 'vue' {
  interface GlobalComponents extends A {}
}
ModyQyW commented 4 months ago

Does this mean that @uni-helper/uni-app-types should tweak the TS type definitions it provides according to https://github.com/vuejs/language-tools/issues/4503#issuecomment-2212492166? or should I just wait for further tweaks and fixes from Volar?

a81n9 commented 4 months ago

If you are using pnpm, you need to install @vue/runtime-core.

Just want to provide a better solution i found, create a .npmrc then add public-hoist-pattern[]=@vue/runtime-core

Note: If in mono repo, it will only work in the root level.

I solved the problem perfectly using this method

.npmrc

public-hoist-pattern[]=@vue/runtime-core

or

shamefully-hoist=true

tsconfig

"vueCompilerOptions": {
    "lib": "@vue/runtime-core",
},

image

llhxhal commented 4 months ago

But some features are missing, as I described above

@zzh948498 I'm sorry I didn't conduct a complete investigation. I have updated the new solution, and it seems to work fine for me.

type A = import('@vue/runtime-core').GlobalComponents;

declare module 'vue' {
  interface GlobalComponents extends A {}
}

I should put these code in which file?

RayGuo-ergou commented 4 months ago

I should put these code in which file?

Wherever, as long as you include in tsconfig.json file

inoryxun commented 4 months ago

如果您使用pnpm,则需要安装@vue/runtime-core。

只是想为我提供更好的解决方案,创建并.npmrc添加public-hoist-pattern[]=@vue/runtime-core 注意:如果在 mono repo 中,将仅在根级别工作。

我用这个方法完美解决了这个问题

.npmrc

public-hoist-pattern[]=@vue/runtime-core

或者

shamefully-hoist=true

ts配置

"vueCompilerOptions": {
    "lib": "@vue/runtime-core",
},

图像

我使用的这个,但是最后view 的类型是any ,全局组件的变成了unknowm

ModyQyW commented 3 months ago

For those who are stuck in uni-app types, please check https://github.com/uni-helper/uni-types. Also, check https://github.com/vuejs/language-tools/issues/4501#issuecomment-2193697696 and https://github.com/vuejs/language-tools/wiki/Global-Component-Types.

I am closing this issue. Please feel free to open another issue if you face problems and don't forget to provide a minimal reproduction. Thanks a lot to all of you guys. 🙏