Typescript cannot find module using @ absolute path syntax Visual Studio Code Volar error

[pholly]

When creating a new app with TypeScript, any imports using absolute path syntax '@/' show as errors in Visual Studio Code with the Volar extension. The app still runs fine.

Steps to reproduce:

IDE: Visual Studio Code
Extension: Volar

npm init vue@3
Typescript support: yes
Everything else: no

pnpm install (or npm install)

Change an import to use @/ absolute syntax, such as in App.vue change the HelloWorld.vue import to import HelloWorld from '@/components/HelloWorld.vue'

There will now be a red line error: Cannot find module '@/components/HelloWorld.vue' or its corresponding type declarations.ts(2307)

Note: if you choose to install router when configuring create-vue, App.vue will already use the absolute path syntax and have an error.

Extra info

• I use Visual Studio Code + Volar extension for other vue 3 vue cli TypeScript projects and don't have the problem.

[sodatea]

Volar alone is not enough for the latest templates.
Please install TypeScript Vue Plugin (Volar) or enable Volar's takeover mode.
For more details, see #26

[pholly]

I tried TypeScript Vue Plugin along with Volar and I still get the error. I'll look into that issue you referenced and try Take Over Mode. Do root paths using @ work for you with just Volar and TypeScript Vue Plugin? Again, the app builds and runs just fine. It's just I get that red line error in Visual Studio Code.

[pholly]

I followed the instructions in the README of my scaffolded project to enable Take Over Mode. After restarting the window, I saw the alert saying Take Over Mode is enabled. I still get the error on @ root syntax imports. I tried disabling TypeScript Vue Plugin (Volar) and still get the error.

Thanks for any assistance.

[sodatea]

Have you disabled Vetur? Do you have a screenshot of the error?

[pholly]

Extensions:

Error:

[richardvanbergen]

Seems like the typescript in VS Code doesn't like file extensions ending with .vue.

I followed the advice in this stackoverflow thread and it's now working for me.

I've created a demo repo that can hopefully reproduce the error. Also getting a bunch of eslint prettier errors off the bat which doesn't make for very good DX but that's a separate issue.

https://github.com/richardvanbergen/test-repo-vue-project

Reproduction steps

1. Download repository and cd test-repo-vue-project && yarn
2. Open in VS code
3. Open src/router/index.ts
4. See the errors in the screenshot

Workaround / fix

1. Open src/shims-vue.d.ts
2. Uncomment line 1

Other information

VS Code typescript version: 4.5.4
Installed extensions (some may be disabled): https://gist.github.com/richardvanbergen/b4b350b349a9ad3404db6462fb58a778

[tetradice]

@sodatea @pholly
I tried the reproduction procedure, but I couldn't reproduce the same phenomenon in my environment.

This may or may not occur depending on the environment, so I think it will be a problem on the TypeScript Vue plugin (Volar) side.

[pholly]

@tetradice Interesting. I have versions 0.31.1 for both. I even disabled all other extensions and restarted Visual Studio Code. I'm on Windows, but that shouldn't matter.

Curious - does it work if you disable TypeScript Vue Plugin?

[sodatea]

Still can't reproduce… Are you creating the project in a monorepo?

[sodatea]

@richardvanbergen You didn't have TypeScript Vue Plugin (Volar) installed.

[richardvanbergen]

@richardvanbergen You didn't have TypeScript Vue Plugin (Volar) installed.

Haha yes thanks I have just figured that out. Is there any reason it's split into two?

[sodatea]

Is there any reason it's split into two?

Before 0.27.22 it was integrated into Volar (with an option to turn it on/off).
But due to VSCode restrictions, the status of the language server plugin can't be persisted. Users must manually re-enable the plugin every time Volar updates.
By splitting it into a separate plugin, you can simply enable/disable the plugin to turn on/off this feature.

[tetradice]

@pholly

Interesting. I have versions 0.31.1 for both. I even disabled all other extensions and restarted Visual Studio Code. I'm on Windows, but that shouldn't matter.

Curious - does it work if you disable TypeScript Vue Plugin?

Hmm... When I tried it, I found something different from what I expected. Even if I disabled the TypeScript Vue Plugin, importing *.vue files in App.vue worked.

However, importing vue files in main.ts doesn't work.

The following can be inferred from these.

• If you want to import a vue file inside a vue file, you don't need the TypeScript Vue Plugin (Volar). It's taken care of by Vue Language Features (Volar).
• If you want to import a vue file inside a ts file, you need the TypeScript Vue Plugin (Volar).

I'm not sure why importing from vue files isn't working only in the pholly environment. But in any case, this is likely to be in the Volar side, not the create-vue side.

So I think it would be better to send this issue to Volar's issues.

My Environment

• OS: Windows 10
• Visual Studio Code x64 v1.63.2
  • running in portable mode (to eliminate the effects of user settings and other extensions)
  • Extensions:
    • TypeScript Vue Plugin (Volar) v0.31.1
    • Vue Language Features (Volar) v0.31.1

[pholly]

@tetradice that's a good find. I can confirm that with the Typescript Vue Plugin (Volar) @ root paths work in .ts files.

Not sure why root path imports aren't recognized for me inside .vue files even when I have Vue Language Features (Volar). I uninstalled and reinstalled just to be sure.

I'll take up an issue with Volar's repo. Thanks for your help!

[sodatea]

Closing as the issue has been resolved in Volar's repo.