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

I’ve got a weird one. Originally posted in https://github.com/vuejs/create-vue/issues/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]

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

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