Cannot find module './App.vue' or its corresponding type declarations.ts(2307)

[jackyking-cn]

Bug Report

Cannot find module './App.vue' or its corresponding type declarations.ts(2307)

🔎 Search Terms

🕗 Version & Regression Information

Visual Studio Code@1.66.1
typescript@4.6.3

⏯ Playground Link

💻 Code

tsconfig.json:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*", "src/**/*.spec.ts", "src/**/*.test.ts"],
  "compilerOptions": {
    "allowJs": true,
    "composite": true,
    "baseUrl": ".",
    "outDir": "./dist/",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["element-plus/global"]
  }
}

🙁 Actual behavior

🙂 Expected behavior

[jarrettmeyer]

I think this is a VSCode bug, not a TypeScript bug. I saw this problem for the first time yesterday on a working project. I can confirm that this bug appears on a TS/Vue project created with npm init vue. (Say "yes" to TypeScript and say "no" to everything else when prompted.) The only files with errors are *.vue files. The npm commands lint, typecheck, dev, and build all work as expected. The only problem is the red squiggle line in VSCode.

[xiaoxiangmoe]

You should install TypeScript Vue Plugin and Vue Language Features.

[jackyking-cn]

I find this issues vuejs/language-tools#1173 ，this is problem of Voler.
But, I include others file extension, like *.sass , it’s still tip 2307.
So, typescript not support others file extension?

https://www.typescriptlang.org/zh/tsconfig#include

If a glob pattern doesn’t include a file extension, then only files with supported extensions are included (e.g. .ts, .tsx, and .d.ts by default, with .js and .jsx if allowJs is set to true).

I think this means typescript support others file extension.

[RyanCavanaugh]

It looks like this is a question rather than a bug report. This issue tracker is for tracking bugs and active work on TypeScript itself, rather than a general forum for programmers using TypeScript to get help or ask questions.

You can ask questions on sites like Stack Overflow. We are not able to provide one-on-one support on the issue tracker. Please read the issue template carefully - it has important information on what kinds of reports can be acted on here, as well as links to useful TypeScript resources. Thanks!

[jackyking-cn]

Thanks everyone. let's wating Volar fix it.

[xjiabin]

You should install TypeScript Vue Plugin and Vue Language Features.

Th. It works for me!

[MasterShi]

create a file under the root of project dir and name it such like 'shims.d.ts' could solve

content:
declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component }

[NguyenKyThinh94]

Still have same proplem with Volar

[riccardolardi]

I'm still having this issue using Sublime and the LSP-Volar package https://github.com/sublimelsp/LSP-volar

[abaumg]

You should install TypeScript Vue Plugin and Vue Language Features.

Please note that in the description of the TypeScript Vue Plugin extension, it says:

⚠️ It's recommended to use take over mode instead of this plugin.

So if you're using VS Code + Volar, you should enable the Takeover Mode instead of installing the extension. It is also mentioned in the Vue documentation: https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

(BTW, the identifier changed from johnsoncodehk.vscode-typescript-vue-plugin to vue.vscode-typescript-vue-plugin.)