language-tools: Typescript cannot find module using @ root path syntax in a project created from create-vue

@johnsoncodehk I have the same problem as @alexvoedi in .vue files in projects created from create-vue. "src/**/*.vue" is definitely in include in tsconfig.

tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
  },
  "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"]
}

It seems that Windows will not allow use "paths": { "@/*":["src/*"] },, try change it to "paths": { "@/*":["./src/*"] },.

@pholly have you try config "paths": { "@/*":["./src/*"] }, in tsconfig on the project?

I have the same problem. Something I noticed:

In newly created *.vue files VS Code does not find tsconfig.json.

I have the same problem. Something I noticed:

In newly created *.vue files VS Code does not find tsconfig.json.

also got this tips everything works fine before I use monorepo structure

@johnsoncodehk ok, I tried it, this problem only occur at volar 0.38.8

My environment

• PC, windows 10
• VS Code:
• VS Code extension:

Reproduction steps

1. clone this repo from https://github.com/gitlilimin/debug-volar-0.38.8, there are 3 project in it

• [vue3-create] is create from npm init vue@latest, doc
• [vite-create] is create from npm init vite@latest, doc
• [old-project] is the project with problems after the update of volar yesterday, it’s a real project, i have removed useless code.

1. you’d better run npm install for there 3 project

2. open a VS Code window, make sure it’s workspace is empty, the window bottom color is blue (not purple)

3. drag [vue3-create] to VS Code window, and it will looks like

4. drag [vite-create] to VS Code window, and drag [old-project] to VS Code window

5. now there 3 project in VS Code window, and there are in same workspace.

6. open [old-project]/src/views/home.vue and you will look this:

Personal summary

I think this problem must be related to the workspace of vscode, and I’m sure it happened in volar 0.38.8

I found some phenomena in the process of trying to find the problem.

• VSCode open a pure project (no workspace), i use above [old-project], it’s always right.

• in above case, in [vue3-create] project, some component import by “@xxx” can be distinguish, but some cannot (like <TestComponentVue/>).

• in [vue3-create]/src/App.vue, <HelloWorld /> tag, put mouse on it can get right tips, but cannot use Ctrl+Click to open it’s file.

• in [old-project]/src/vies/home.vue, <HelloWorldVue/> tag can use Ctrl+Click to open it’s file. in this file, only <XButton> and <XComponent> is wrong, becase their path is deeper than others

• in a few case, VSCode open [old-project] some .vue file, the right-bottom “tsconfig.json” cannot be read, it’s only show “no tsconfig”. it’s ok when i restart VSCode.

@pholly Can you give a minimal reproducible demo?

Can you try to reproduce it in a new VSCode environment? For example:

• install Visual Studio Code Insiders https://code.visualstudio.com/insiders/
• install latest Vue Language Features and TypeScript Vue Plugin
• open your minimal reproducible demo
• see if there also exist some ts error

For me it worked after I added to src directory a env.d.ts file with the following:

declare module "*.vue" {
  import type { DefineComponent } from "vue"
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

@johnsoncodehk @alexvoedi @saeedtabrizi I also had the same issue today after scaffolding a brand new project using vite, it got resolved by simply adding “moduleResolution”: “node” in compilerOptions object of tsconfig.app.json

I found a new phenomenon right now

2 project in 1 workspace, the first project is right, second project wrong

change the project order, result changed

Interesting~

I have the same problem, i have not change any file, it was normal to open it yesterday, but now this problem happened.

This is a windows10 PC, volar auto update to v0.38.7

the problem looks like:

• in .ts file, import xx from “@/xxx” is right
• in .vue file, import xx from “@/xxx” is wrong
• tsconfig.json filled in the correct settings
• project can be “dev” without any error
• project can be “build” without any error
• all project occur same problem in your VSCode workspace

I try there things:

1. reload my PC
2. uninstall VSCode and install it (no any other extensions), and install volar
3. try vscode-typescript-vue-plugin
4. try Take Over Mode
5. try create a new vue project

As an obsessive-compulsive disorder, I feel hopeless…

But in the end, I found the problem. It seems to be related to VSCode workspace when i pick the project to a new VSCode window, it fixed. And when i open it in the old workspace, this problem reappears.

Bad workspace, “…/…/tsconfig”

Good workspace

you can see right-bottom, “tsconfig.app.json”, It seems that volar read the root directory of the project incorrectly

I got same problem recently, without any update in my project.

@xiaoxiangmoe I can’t reproduce anymore - npm init vue@3 works now. I just tried it 3 times and in all 3 projects tsconfig was recognized in .vue files. The screenshot above was from the same command a few days ago. I see that create-vue npm package was just updated a few hours ago - maybe that’s why I have no issue now.

@johnsoncodehk I have no problems with projects created from create-vue now.

Thank you both.

@alexvoedi make sure you have add your vue files to include option of tsconfig: https://github.com/johnsoncodehk/volar-starter/blob/7a4b2f99103f5eab0bad76365be841f264623211/tsconfig.json#L14