Typescript cannot find module using @ absolute path syntax Visual Studio Code Volar error about create-vue HOT 15 CLOSED

@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

from create-vue.

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

from create-vue.

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.

from create-vue.

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.

from create-vue.

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

from create-vue.

Extensions:

Error:

from create-vue.

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

from create-vue.

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

from create-vue.

@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?

from create-vue.

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

from create-vue.

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

from create-vue.

@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?

from create-vue.

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.

from create-vue.

@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!

from create-vue.

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

from create-vue.