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

[pholly]

I've got a weird one. Originally posted in vuejs/create-vue#35

Summary

When creating a project in the new recommended way using npm init vue@3, @ root path imports show an error in .vue files. @ root path imports work fine inside .ts files. The strange thing is others haven't been able to reproduce my problem. See the issue mentioned above.

Setup

Visual Studio code - up to date
Vue Language Features (Volar) - v0.31.1
TypeScript Vue Plugin (Volar) - v0.31.1
Windows 11

Steps to reproduce

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

pnpm install (or npm install)

Open App.vue and change an import to use @/ root path syntax. E.g. import TheWelcome from '@/components/TheWelcome.vue'. I get an error: Cannot find module '@/components/TheWelcome.vue' or its corresponding type declarations.ts(2307)

Things I tried

• Disabling all other plugins
• Uninstalling/reinstalling Volar plugins
• Enabled Take Over Mode

[xiaoxiangmoe]

@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

[olemarius]

Rolling back from 0.31.1 to v0.30.6 worked for me.

[pholly]

@xiaoxiangmoe the easiest reproducable demo is to use npm init vue@3 and choose TypeScript and no to every other option then change an import inside App.vue to use @/ syntax instead of relative path.

I tried Visual Studio Code Insiders:

• No error now in App.vue - @/ root path syntax works
• Now I get a cannot find module error in main.ts on import App from '@/App.vue'. The @/ syntax works for non .vue imports, like if I try to import another TypeScript file.

@olemarius rolling back to v0.30.6 didn't work for me - I still get the error in App.vue.

[xiaoxiangmoe]

@pholly

Do you install https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin ？

[pholly]

@xiaoxiangmoe yes sorry I installed both extensions

[johnsoncodehk]

@pholly can you reproduce this problem in https://github.com/johnsoncodehk/volar-starter?

[pholly]

@johnsoncodehk yes same problem. I also get an error in main.ts when using @/ syntax on import of a vue file. Relative paths work in both cases. Screenshots below.

[johnsoncodehk]

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

[pholly]

@johnsoncodehk just tried. Still same errors in both. Also the error in main.ts prevents the app from running (starting the dev server). If I fix main.ts, the site builds and runs but the error in App.vue shows up immediately in the browser.

I also tried closing and reopening VS Code.

Let me know if there's anything else you want me to try.

[xiaoxiangmoe]

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

[johnsoncodehk]

@pholly I can't reproduce this problem and I think it's related to your system, please try @xiaoxiangmoe's suggestion.

If still not working, you can use live share with me so I will able to check the problem. You can join volar discord server(https://discord.gg/5bnSSSSBbK) to find me.

[pholly]

No errors in either main.ts or App.vue! I mistakenly put the paths line outside of compilerOptions. When I moved it there both errors went away. Yes I have to specify ./src/* like you both mentioned. If I put just src/* an error shows that the baseUrl is not specified.

I still get the error in App.vue in a project created from vue init vue@3 (create-vue). BaseUrl is specified in compilerOptions and even if I change path to `./src/* I still get the error.

Let me know how I should proceed - go back to my issue in create-vue project?

[johnsoncodehk]

@pholly if the path option generated by create-vue you should report there.

[pholly]

@johnsoncodehk sorry although I don't get errors when viewing main.ts or App.vue in VS Code, I get errors when trying to run the app with npm run dev.:

[vite] Internal server error: Failed to resolve import "@/App.vue" from "src\main.ts". Does the file exist?

Likewise I get an error in App.vue if I fix the path in main.ts to be relative.

I'll reach out to you on volar's discord. Thanks for all your work and help.

[johnsoncodehk]

@pholly tsconfig only for IDE, you should config resolve.alias in vite.config for vite.

[alexvoedi]

I have the same problem. Something I noticed:

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

[johnsoncodehk]

@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

[alexvoedi]

Everything is set up correctly in my project. Vetur works fine, Volar does not. This has only been a problem for a few days.

[johnsoncodehk]

@alexvoedi could you provide minimal reproduction?

[pholly]

@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"]
}

[xiaoxiangmoe]

@pholly could you provide minimal reproduction?

[pholly]

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

[coader]

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

[mattiaz9]

if I have a component named home.vue doesn't recognize the tsconfig, but with any other name it does.

[moreant]

I have the same problem. Looks like tsconfig is not found.
I have done case renaming of this file and directory, system is windows.

vue files in the same folder are normal

When I move the TempCoverPage.vue file to the "form" folder it works fine

[moreant]

#894 (comment)

I deleted the temp folder and then recreated the vue folder. It was normal. At that time, the temp folder with different capitalization appeared in the git commit. I'm guessing it might have something to do with this

[pleek91]

I have this issue in a project as well. Seems like the alias works if the .vue file doing the importing is either two words, or lowercase its fine.

button.vue - alias works
ButtonSection.vue - alias works
Button.vue - alias does not work

[mollyxfma]

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

[mollyxfma]

when i disable volar and use vetur, typescript errors disappeared

[gitlilimin]

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

[gitlilimin]

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~

[johnsoncodehk]

@gitlilimin It may related to #1193, #1262 fixing. Could you provide a minimal reproduction?

[gitlilimin]

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

2. you'd better run npm install for there 3 project

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

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

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

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

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

• in [vue3-create]/src/App.vue, 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, tag can use Ctrl+Click to open it's file. in this file, only and 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.

[zhangyanwei]

@gitlilimin Thank you, you saved my time.

[wsli10]

The vscode right-bottom "No tsconfig" maybe just caused by incorrect include config.
./src/**/*.vue didn't match vue files out of src dir, use ./**/*.vue instead.
see tsconfig#include

{
  "compilerOptions": {
    // ...
    "paths": { "@/*": ["./src/*"] } // path alias
  },
  "include": ["./**/*.ts", "./**/*.vue"]
}

[saeedtabrizi]

@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"]
}

This is a good hint . I had same issue but now it's OK . Thanks @olemarius

[gitamitdixit]

@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

[mitar]

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
}

[Stubbs]

@mitar your solution works for me too, do you know why?

[msteen]

I ran into this issue with my own Volar (not Vue) project and it turned out I had to set baseUrl in compilerOptions for paths to work. I thought this was no longer required due to the TypeScript docs saying:

As of TypeScript 4.1, baseUrl is no longer required to be set when using paths.

[joshrincon-aven]

FYI i noticed for me that adding .vue to the import statement solves the problem for me. more of a short term solution, however.