TypeScript 'cannot find module...' in Vue project

Question

I'm using TypeScript in Vue project.

But when I try to import vue file, I can't get .vue file since the 'cannot find module...' error.

What is weird is that intellisense only shows the directory right upper the .vue file.

Intellisense shows the directory well

But it doesn't show the .vue file inside it

I also have vue-shim.d.ts file in root directory.

Turbo

Have you found a solution for it? I have the same issue – Chandelle

@RobinSchambach No I didn't... I'm using React now so I'm not facing that issue but didn't solve that. – Turbo

Answer 1

You should install TypeScript Vue Plugin and Vue Language Features.

Heti

Don't forget to disable the built-in TypeScript support in VS Code. vuejs.org/guide/typescript/overview.html#volar-takeover-mode – Nigh

The TS Vue Plugin is now deprecated; you should use "Vue Official" vscode plugin instead: marketplace.visualstudio.com/items?itemName=Vue.volar – Occultation

Answer 2

Try adding the following into index.d.ts in the project root, works for now.

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

or try to configure the path in tsconfig with

"paths": { "@/*":["./src/*"] }

or edit includes in tsconfig with

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 

Tithing

I think this is but a vue 2 fix, see @rjurado01 answer for vue 3. – Kiely

Answer 3

If you are using Vue 3 you should add this into a type file like vue.d.ts:

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

You can see it working here: source

Circus

vue3 also seems to be set up for the following to work as well: declare module '*.vue' { export default never } – Kiely

Answer 4

In my case the issue is with VS Code. After doing

Shift + CMD + P  -> Restart typescript server (Mac)

The lint issue is no more.

Waldheim

Is there any way to not having to do this again and again each time it brokes? – Rochelrochell

Answer 5

For me, following resolved the issue Windows 10:

1. Focus on any *.ts (preferably for which you are getting error)

   CTRL + SHIFT + P -> Restart TS Server
   

2. Focus on any *.vue (preferably in which you are getting error)

   CTRL + SHIFT + P -> Restart Volar server
   

Antimere

Answer 6

I was working on IntelliJ 2023.2.2 and I had the same issue. None of the other solution worked, until I selected "Repair IDE"

Cruck

I was trying all the work arounds on vs-code. (Having installed the vue extensions and all.) Closing the editor and opening the project back up fixed the issue. – Orchestrate