[Bug]Can't not get right type for vue component prop

[ishowman]

Describe the bug

When I do not install unplugin-vue-components:

• volar could know that msg prop should be string but not number;
• pnpm build could get the same error type info

After install unplugin-vue-components, and add comment for import statement:

• the error disappear, and volar tells me msg prop is number
• pnpm build succeed and no error info
• If I remove comment for import statement, it behaves as screenshot1 even component.d.ts still declare HelloWorld component

  HelloWorld.vue is created by create vue, I didn't change any codes.

I am not sure the bug is caused by unplugin-vue-components or vue-tsc, please check it.

how i create the repo

• init with create-vue to create project
• install unplugin-auto-import, here is the code diff
• install unplugin-vue-components, here is the code diff)

Reproduction

https://github.com/ishowman/vue3-ts-buiild-bug/tree/vue-components

System Info

Plugins: (already finish setup with volar-takeover-mode)

• Vue Language Features (Volar)：v1.6.4
• TypeScript Vue Plugin (Volar)：v1.6.5

pnpm: 8.5.1
node: 18.12.1

 System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.97 GB / 7.86 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.50)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[ishowman]

@antfu I am not sure the bug is caused by unplugin-vue-components or vue-tsc, could you do me a favour? pnpm vue-tsc -v return the same typescript version as volar and package.json, so I can sure they are use the same typescript version.

[lishaobos]

hi, just put your components.d.ts in src directory

Components({
      dts: './src/components.d.ts'
    })

[ishowman]

hi, just put your components.d.ts in src directory

Components({
      dts: './src/components.d.ts'
    })

I've move the file and change the file path in tsconfig.app.json, and choose Volar: restart vue server：

Still not work, and pnpm build still passed with no error:

[lishaobos]

what is your pkg manager name, npm or pnpm?

[ishowman]

your pkg manager is npm or pnpm

pnpm

[lishaobos]

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D

and restart your ide

[ishowman]

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D

and restart your ide

So amazing, why it works but docs didn't tell me to install it? @lishaobos

[lishaobos]

i think is pnpm bug or limit

[ishowman]

i think is pnpm bug or limit

If install dependencies with npm or yarn, it will work normally without pnpm add @vue/runtime-core -D?

[lishaobos]

If install dependencies with npm or yarn, it will work normally without pnpm add @vue/runtime-core -D?

looks like it.

[ishowman]

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D

and restart your ide

If I build project in ci ,and ci do not have any ide to reload,what should I do?

[lishaobos]

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D and restart your ide

If I build project in ci ,and ci do not have any ide to reload,what should I do?

ci do not need to reload.

[ishowman]

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D and restart your ide

If I build project in ci ,and ci do not have any ide to reload,what should I do?

ci do not need

your pkg manager is npm or pnpm

pnpm

exec pnpm add @vue/runtime-core -D and restart your ide

If I build project in ci ,and ci do not have any ide to reload,what should I do?

ci do not need to reload.

ci can't find type error in this case, and will pass when run npm scripts build.

[daiwanxing]

I found the same issue #355. It's looks like a pnpm bug or feature, and some people provided two ways to solve it

• pnpm install @vue/runtime-core
• set public-hoist-pattern[]=@vue* or shamefully-hoist=true at .npmrc file.

finally restart your vscode, It' will be solved.

[ishowman]

will it not work in ci for there is no vscode in ci? I am confuse about why restar vscode is necessary, while ci need to run buildscript to check types.

[lishaobos]

will it not work in ci for there is no vscode in ci? I am confuse about why restar vscode is necessary, while ci need to run buildscript to check types.它会在 CI 中不起作用，因为 CI 中没有 VScode？我对为什么需要重新命名 vscode 感到困惑，而 ci 需要运行 build 脚本来检查类型。

because need trigger syntax highlighting on vscode, nothing else.

[ishowman]

will it not work in ci for there is no vscode in ci? I am confuse about why restar vscode is necessary, while ci need to run buildscript to check types.它会在 CI 中不起作用，因为 CI 中没有 VScode？我对为什么需要重新命名 vscode 感到困惑，而 ci 需要运行 build 脚本来检查类型。

because need trigger syntax highlighting on vscode, nothing else.

so the type-checking of vue-tsc will work normally if no vscode reload, right?

[lishaobos]

will it not work in ci for there is no vscode in ci? I am confuse about why restar vscode is necessary, while ci need to run buildscript to check types.它会在 CI 中不起作用，因为 CI 中没有 VScode？我对为什么需要重新命名 vscode 感到困惑，而 ci 需要运行 build 脚本来检查类型。

because need trigger syntax highlighting on vscode, nothing else.

so the type-checking of vue-tsc will work normally if no vscode reload, right?

yes, 😎

[richex-cn]

I got similar problem and resolved it with https://github.com/antfu/unplugin-vue-components/issues/635#issuecomment-1560678975

[wenfangdu]

Will be fixed by https://github.com/antfu/unplugin-vue-components/pull/638.