[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

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• 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 build script to check types.