Vue project encountering TypeScript error: Module not found

Question

Vue project encountering TypeScript error: Module not found

In my Vue project, I am encountering an issue while using TypeScript.

Whenever I try to import a .vue file, I encounter a 'cannot find module...' error.

https://i.sstatic.net/jUPGe.jpg

The strange thing is that the intellisense only displays the directory right above the .vue file.

https://i.sstatic.net/aOWlg.jpg The directory is shown correctly by intellisense

https://i.sstatic.net/ZpAwT.jpg However, it does not display the .vue file within it

In addition, I have a vue-shim.d.ts file located in the root directory.

typescript vue.js visual-studio-code import vuejs2

Answer 1

Answer №1

For a temporary solution, consider inserting the code below into index.d.ts at the project root:

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

Alternatively, you can update the path configuration in tsconfig by adding:

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

Or modify the includes section in tsconfig to include the following file types:

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

Answer 2

For a temporary solution, consider inserting the code below into index.d.ts at the project root:

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

Alternatively, you can update the path configuration in tsconfig by adding:

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

Or modify the includes section in tsconfig to include the following file types:

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

Answer 3

Answer №2

It is recommended to set up the TypeScript Vue Plugin as well as the Vue Language Features.

Answer 4

It is recommended to set up the TypeScript Vue Plugin as well as the Vue Language Features.

Answer 5

Answer №3

For those utilizing Vue 3, it is recommended to insert the following code into a type file such as 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
}

To observe this in action, check out the implementation here: source

Answer 6

For those utilizing Vue 3, it is recommended to insert the following code into a type file such as 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
}

To observe this in action, check out the implementation here: source

Answer 7

Answer №4

For me, the problem lies within Visual Studio Code. By following these steps:

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

The linting problem disappears completely.

Answer 8

For me, the problem lies within Visual Studio Code. By following these steps:

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

The linting problem disappears completely.

Answer 9

Answer №5

In order to resolve the issue with Windows 10, I found the following steps to be helpful:

First, focus on any *.ts file (especially ones generating errors)
```
Press CTRL + SHIFT + P -> Restart TS Server
```
Next, concentrate on any *.vue file (specifically those causing issues)
```
Press CTRL + SHIFT + P -> Restart Volar server
```

Answer 10

In order to resolve the issue with Windows 10, I found the following steps to be helpful:

First, focus on any *.ts file (especially ones generating errors)
```
Press CTRL + SHIFT + P -> Restart TS Server
```
Next, concentrate on any *.vue file (specifically those causing issues)
```
Press CTRL + SHIFT + P -> Restart Volar server
```

Answer 11

Answer №6

While using IntelliJ version 2023.2.2, I encountered a persistent issue. Despite trying multiple solutions, none seemed to work for me until I decided to opt for the "Repair IDE" option.

https://i.sstatic.net/LXJOk.png

Answer 12

While using IntelliJ version 2023.2.2, I encountered a persistent issue. Despite trying multiple solutions, none seemed to work for me until I decided to opt for the "Repair IDE" option.

https://i.sstatic.net/LXJOk.png

Vue project encountering TypeScript error: Module not found

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Error with importing images detected on the React/Next.js website

Modify follow status once axios request is completed in Vue

Setting the default value for ngModel does not receive any information from the model

Can you provide some guidance on how to effectively utilize buefy's b-taginput within a custom component to enable two-way binding functionality like v-model, as it seems to currently only support one-way

Enable Vue getters only if they have a defined value

What are the drawbacks of combining exports through re-exporting in TypeScript?

What is the preferable method: passing in $event or implying it?

What is the reason behind VS Code not showing an error when executing the command line tsc shows an error message?

Troubleshooting a database update issue within an Angular and NestJS application

Managing rows in the Vuetify grid system

What is the best approach to setting up dynamic Vue routing?

The non-generic nature of Typescript's Type Object is a distinguishing feature

React is struggling to locate the specified module

Issues arise when trying to insert a control based on the index in an Angular Reactive FormArray

What is the best way to transition two elements simultaneously?

Guide to Sending Form Data from Vue.js to Spring Boot

Troubleshooting issues with dynamic URL functionality in Vue.js with Vue Router

Encountered difficulties when trying to incorporate SCSS into my rollup build

Show an input field upon button click within a ngFor loop by utilizing *ngIf in Angular/TypeScript

Encountering a Typescript error while attempting to remove an event that has a FormEvent type