Intellisense does not work for auto-imported components

[mareszhar]

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.

[Sight-wcg]

#389
#406

[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.

[ThaDaVos]

I am having the same issue - and I am using npm not pnpm - tried above steps and also the Volar downgrade - sadly doesn't work

[mareszhar]

@ThaDaVos I just tested using npm instead of pnpm in the issue-fix branch of my minimal reproduction repo, and everything is working fine. Can you try cloning that branch, installing the dependencies with npm, and seeing if the issue persists?

[donghero]

@mareszhar
I watched your repository, you used typescript.
add "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"], on tsconfig.json.
Personally I think u missed components.d.ts

[ThaDaVos]

@ThaDaVos I just tested using npm instead of pnpm in the issue-fix branch of my minimal reproduction repo, and everything is working fine. Can you try cloning that branch, installing the dependencies with npm, and seeing if the issue persists?

That one works for me - strangely, it has @vue/runtime-core in it - but my own project does not work - even though it looks the same...

@mareszhar I watched your repository, you used typescript. add "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"], on tsconfig.json. Personally I think u missed components.d.ts

That's not true in my case, it's: "env.d.ts", "src/**/*", "src/**/*.vue"

[ThaDaVos]

@mareszhar should the Intellisense of that repo look like this?

If I click it, it opens components.d.ts and not the component itself

[ThaDaVos]

Nvm... it does work in my project, but for some reason - many of my components are just any inside components.d.ts also:

All the light blue ones are any instead of their actual type

EDIT: Figured this one out, it's because my components does not have a <script> tag in there

[donghero]

https://github.com/antfu/unplugin-vue-components

In this docs you could see add components.d.ts to your tsconfig.json under include

[mareszhar]

@mareszhar should the Intellisense of that repo look like this?

If I click it, it opens components.d.ts and not the component itself

@ThaDaVos Correct, that's the same intellisense preview I see of the HelloWorld component. I agree, it's inconvenient that doing ctrl/cmnd + click to the component doesn't take you to the component's file, but rather to its type definition in components.d.ts, but at least you can see its relative path there if you need to find it among many other components. Hopefully in the future, there's better navigation support for auto-imported components.

[mareszhar]

@mareszhar I watched your repository, you used typescript. add "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"], on tsconfig.json. Personally I think u missed components.d.ts

@donghero You only need to add components.d.ts to your include array in tsconfig.json if it isn't covered by any of the other match patterns. If you check the vite.config.ts in my repo, you'll see that I specified a path for components.d.ts so that it's generated inside the src folder. Since one of the match patterns in my tsconfig.json file is src/**/*.d.ts, that already covers any .d.ts file that may be found inside the src folder.

[mgiraldo]

I agree, it's inconvenient that doing ctrl/cmnd + click to the component doesn't take you to the component's file, but rather to its type definition in components.d.ts, but at least you can see its relative path there if you need to find it among many other components. Hopefully in the future, there's better navigation support for auto-imported components.

is there currently no way to enable this click to go to the actual component?

[calebwaldner]

I had trouble with this too. I tried options 1, 3, 4, and 5 from this comment, no luck. I specifically had trouble with getting type-checking on inline functions within a v-on property. So something like this

<MyComponent @some-event="
    (someParam) => someFunction(someParam)
"></MyComponent>

would give me Parameter 'someParam' implicitly has an 'any' type.ts(7006) even though I have this param defined within the component correctly.

I can verify that the auto-import is the problem because if I simply import the component MyComponent (don't depend on auto-importing), type checking kicks in correctly and someParam would be defined to whatever type I have it set as within MyComponent.

Please let me know if there is a fix for this issue or if I have something messed up on my end.

[Paracelsus-Rose]

Any updates on this? With neovim, while in the SFC, gd to goto definition, then gf on the file name works, while not the best, it gets you where you want to go.

Anyone with success on neovim and having gd get you to the component without the middle through the .d.ts?

[lirong098]

@mareszhar 我看到了 你的存储库，你使用了打字稿。 添加tsconfig.json。_ 我个人认为你错了"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"],****components.d.ts

The core answer

[blowsie]

I also have this issue in WebStorm but it may be due to Volar support there being experimental, adding explicit imports is working just fine.

[Luks3110]

Does anyone know an solution for yarn? npmrc doesn't work with yarn, I coul only get it working with npm and pnpm