Intellisense does not work for auto-imported components

Describe the bug

When I hover over an auto-imported component, intellisense does not work. There is no information about the imported component in the modal that opens up:

After a lot of experimentation, I noticed that this only occurs when the module name in the auto-generated components.d.ts file is @vue/runtime-core.

If I change the module name from @vue/runtime-core to vue, intellisense works!

The problem is that manually changing the module name is not sustainable. Whenever unplugin-vue-components detects a new component in my components’ directory, it updates the components.d.ts file and changes the declared module name back to @vue/runtime-core.

Why does changing the module name restore intellisense support? Is there any way to configure unplugin-vue-components to name the declared module vue instead of @vue/runtime-core?

I’m really confused by this bug. All help is appreciated.

Thank you for reading! ❤️

---

PS: I have version 0.39.2 of Vue Language Features (Volar) installed.

Reproduction

https://github.com/mareszhar/demo-imifcaiwuvc-mrfi

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 314.05 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    npm: 8.15.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox Developer Edition: 102.0
    Safari: 15.5

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.

[mareszhar]

Thank you @Sight-wcg for the pointers!

I’ll summarize the answers in English here for others who might be facing the same issue:

The problem occurs in the automatically generated components.d.ts file, where the module with the auto-imported component types is declared as @vue/runtime-core. Intellisense is lost because pnpm can only access a project’s top-level dependencies, and @vue/runtime-core is a dependency nested inside the vue module (that is, not a top dependency). So, the declaration fails.

There are several ways to solve this issue:

1. 🌟 (preferred) Create or edit a .npmrc file in your directory’s root, and add this line in it: public-hoist-pattern[]=@vue/runtime-core
2. (not recommended) Create or edit a .npmrc file in your directory’s root, and add this line in it: shamefully-hoist=true (Doing this will make all nested dependencies available as top-level dependencies)
3. (not recommended) Run pnpm add @vue/runtime-core -D to add the nested module as a top-level dependency. (You must ensure the version of @vue/runtime-core matches the version of Vue installed in your project.)
4. (not recommended) Use version 0.18.5 of unplugin-vue-components instead of the latest version. (Works because up to this version unplugin-vue-components declared the module in components.d.ts as ‘vue’. The downside is that you’ll miss out on the latest updates and improvements to the plugin.)
5. (not recommended) Manually update the module declaration name in components.d.ts to declare module 'vue' instead of declare module '@vue/runtime-core' (Inconvenient because you’ll have to update the module name whenever unplugin-vue-components automatically generates a new components.d.ts file and overwrites your changes.)

If you chose option 1 or 2 and created the .npmrc file, run pnpm i afterwards to update your node_modules with the latest config. Then, reload your workspace. Intellisense for auto-imported components should be working again.

Maybe solution 1 should be added to the plugin docs?

PS: Credits to wangyu-personal and loosheng for their answers in the related threads.

[Sight-wcg]

https://github.com/antfu/unplugin-vue-components/issues/389 https://github.com/antfu/unplugin-vue-components/issues/406