Cannot work in .vue file

[otomad]

Describe the bug

It can be working properly in *.ts, *.tsx files, but cannot be working in *.vue files.

Screenshots

works fine in *.ts

works fine in *.tsx

cannot work in *.vue, detect as Record<string, string>.

Desktop

• OS: Windows 11
• Browser: Edge, Chrome
• Version: 108.0.5359.99

Additional context

One more thing, if enable VSCode extension TypeScript Vue Plugin (Volar), it will conflict with typescript-plugin-css-modules, and crash the tsserver.

[mrmckeb]

Hi there, are you able to provide a simple reproduction for me to test against? I don't work with Vue, but if you can provide a reproduction I should be able to find out what's happening!

[otomad]

I opened a repository to test typescript-plugin-css-modules in vue.

It works in
*.ts (/src/main.ts),
*.tsx (/src/components/MyJsx.tsx),

and doesn't work in
*.vue (/src/components/HelloWorld.vue).

And if VSCode extenstion TypeScript Vue Plugin (Volar) is enabled, typescript-plugin-css-modules will not work either.

[mrmckeb]

Thank you! I'll try to investigate and find a resolution this week.

[MichaelBitard]

I think it has something to do with vue-tsc/volar.

See vuejs/language-tools#1128 😢

[aradalvand]

I'm having the same problem but for .svelte files, so this may something to do with VIte, perhaps — since Vite is the common denominator between Vue and SvelteKit.

@mrmckeb Any updates?

[aradalvand]

@otomad Actually, Volar seems to have an option that lets you change the TypeScript version it uses under the hood; see if changing that to the workspace version fixes your problem.

Open up the command palette (Ctrl/CMD + Shift + P), and find the "Volar: Select TypeScript Version" item:

And then choose "Use workspace version":

[mrmckeb]

Thanks @aradalvand! @otomad can you confirm that this suggestion solves your issue?

[otomad]

Thanks @aradalvand! @otomad can you confirm that this suggestion solves your issue?

No, it still doesn't work.

[mrmckeb]

I've spent some time digging into this today, and it looks like this is not supported by Volar - as @MichaelBitard said.

Here the author's state that they don't support plugins:
vuejs/language-tools#2153 (comment)

Here they detail why:
vuejs/language-tools#1005 (comment)

I'll have to close this off for now sorry, but would love to help you if I could.

[mrmckeb]

@aradalvand if you're still having issues with Svelte, please create a separate ticket/repro repo and I can dig in. It may be a similar issue, but I can investigate.

[otomad]

Well, thank you very much anyway.