In vue components, if a symbol is imported from 'vue' module, additional imports are not auto-completed.

[michaeldaw]

example:
Start with an empty vue component.
Begin typing 'onMounted' and hit tab to auto-complete.
An import statement is created in which onMounted is imported from 'vue'.
Begin typing 'onUnmounted' and hit tab to auto-complete.
'onUnmounted' is not added to the imports from 'vue'.

Other modules seem to work fine. This only seems to happen with the 'vue' module.

test.mp4

[LinusBorg]

FWIW: Works fine for me.

[Yooling-lei]

me too, v1.0.13

[mattersj]

That's indeed a bug and I assume it's caused by ambient modules: if you have them in your project (declare module '...') you'll likely see this error instead of the actual completion.

Look closely at the video and check out a detailed description of the selected completion on the right side, there's an error [TS Error] {} (timecode is 0:11). That's because Volar fails to provide correct completion and throws an error here:

https://github.com/johnsoncodehk/volar/blob/cba2eba187b2d82e1d45dd86b3edeab0ca7caad6/plugins/typescript/src/services/completions/resolve.ts#L43-L48

You can try to reproduce these steps in a regular *.ts file with takeover mode turning off and everything will be working fine but once you enable takeover mode you'll get this error even in *.ts files.

I was testing this on vue-router as well and I got the same error after adding the following code in a *.d.ts file:

declare module 'vue-router' {}
export {};

But if I comment out the ambient declaration:

The completion works perfectly fine in regular *.ts files even with the declaration.

[jinyongp]

Another error occurs from v1.0.8

How do I fix them?

[johnsoncodehk]

My fault, I found that when changing the cancel token to always respond true, I can always get [TS Error] { }, so 697b22a is likely to fix problem.

[mattersj]

@johnsoncodehk Sounds great, thank you for looking into it!

[mattersj]

@johnsoncodehk Unfortunately, the issue is still there even after upgrading to v1.0.18.
Interestingly, it occurs only if you already have at least one import.

import { ref } from 'vue';

watch... // <--- Autocomplete gives you [TS Error] {}

but at the same time autocomplete works perfectly if you comment out the import line.

[netitgo]

this bug still exists after update to v1.0.18

[johnsoncodehk]

This is a bug from TypeScript, but it can't reproduce in .ts because tsserver has additional logic for handling auto importing (It at https://github.com/microsoft/TypeScript/blob/68df4befd68c0325861bd5b87c6e4d251ffd5a41/src/server/project.ts#L1989-L2020), so it behaves differently than vue-language-server using a single typescript language service, and the additional logic just bypasses the bug coincidentally.

Here is a workaround for now.

1. Install volar-1.0.19-alpha.1.vsix.zip which supports autoImportFileExcludePatterns setting by 0ed1cbc. Update to v1.0.19 or later.

2. Add @vue/runtime-core, @vue/runtime-dom to autoImportFileExcludePatterns in VSCode settings.

.vscode/settings.json:

{
	"javascript.preferences.autoImportFileExcludePatterns": [
		"@vue/runtime-core",
		"@vue/runtime-dom"
	],
	"typescript.preferences.autoImportFileExcludePatterns": [
		"@vue/runtime-core",
		"@vue/runtime-dom"
	]
}

3. Reload VSCode.

[mattersj]

@johnsoncodehk I've tried it that way and it sometimes do really work but sometimes still fails.
Now I'm getting the following error when trying to auto-import reactive for example:

However, as I understand this workaround only works for vue anyway but not for any other library which is a bummer since this issue affects pretty much everything :(
Are there any chances for this to be fixed on the TS side or do we need another workaround that is going to work with any library?

[johnsoncodehk]

@mattersj If you do not rely on TS 4.9 features, you can temporarily downgrade to 4.8.3.

[mattersj]

@johnsoncodehk I haven't realized right away that this bug is related to the latest TS minor release, thanks for clearing this up.
I have a couple of satisfies in my project but I think it's worth removing them in return for working auto-import so I downgraded to 4.8.3 as you suggested, thank you!

[michaeldaw]

Thanks for everyone's efforts.

Is there an issue open in the Typescript project for the underlying issue? I'm not really up on the details, but it may be prudent for someone who better understands it to make one if not.

[johnsoncodehk]

@michaeldaw There was a similar issue in the past: microsoft/TypeScript#46115

It's a bit difficult to provide the minimal reproduction needed for this issue, because as I said tsserver in *.ts just happens to bypass the issue. I have to done my other priorities first and then I will see if I can submit a PR for this.

[johnsoncodehk]

@johnsoncodehk I've tried it that way and it sometimes do really work but sometimes still fails. Now I'm getting the following error when trying to auto-import reactive for example:

@mattersj since reactive comes from the @vue/reactivity package, adding @vue/reactivity to autoImportFileExcludePatterns might handle this case for TS 4.9.

[mattersj]

@johnsoncodehk Yep, it handles this case but the issue is not only with reactive but with any other third-party library import such as import { xxx } from 'vue-router' so I don't think that listing all of these libraries is a better idea than just temporarily downgrading to 4.8.3 until a fix is rolled out.

[mgiraldo]

volar v1.0.24
vscode v1.74.3 (universal)

i'm getting a similar problem:

volar keeps throwing this:

[TS Error] Error: Debug Failure. False expression: Some exportInfo should match the specified moduleSymbol {}

and it is intermittent. reloading the vscode window sometimes gets it working but then after a few minutes it does again. i tried with and without preferences.autoImportFileExcludePatterns and it did not seem to make any difference. any ideas?

[johnsoncodehk]

Fixed by microsoft/TypeScript#52686

[Nagell]

Nope, it's still there. Am I missing something?

Vue Language Features (Volar) - v1.2.0
TypeScript Vue Plugin (Volar) - v1.2.0
Typescript 4.9.5 (takeover)

[BARNZ]

Yeah looks like the fix is just not in any typescript release yet:

• Fix merged to main branch on Feb 11
• Latest ts release (v4.9.5) on Feb 1

[bazuka5801]

@BARNZ now we can install typescript@next (Feb 12), as I see the problem is gone ✅

[mgiraldo]

@BARNZ now we can install typescript@next (Feb 12), as I see the problem is gone ✅

this is for the project/workspace typescript or for the operating system global typescript?

[wenfangdu]

Confirmed, ts v5.0.2+ doesn't have this issue:

[CoderLadFahim]

I have the latest TS version, it's still not working for me.
Ironically, auto imports with take-over mode seem to be working everywhere except for Vue files.

Please help.

[mgiraldo]

there was something i did recently that made it work again 😅 but i forgot what it was (took me a million tries 🫠). if there is a way for me to share my current config i could paste it here.

[ryanaltvater]

if there is a way for me to share my current config i could paste it here.

Post a JSFiddle or CodePen link. 👍

I think it's funny that as soon as I come to this thread I see 2 recent posts about something I'm experiencing this morning, but did not yesterday. Really odd. Stars aligned I guess.

[CoderLadFahim]

@ryanaltvater
Are you also running the latest version of typescript and/or node?