VSCode showing "cannot find module" TS error for .vue import while compiling doesn't

Question

Simply put, vscode is showing this error in a module:

Cannot find module '@/components/SidebarToggleIcon'

But no such error shows up during compilation.

This is a VueJS project and SidebarToggleIcon is a .vue file with TypeScript in the <script lang="ts"> section. This error was showing up before in VSCode and during compilation until I added the @vue/eslint-config-typescript package. Now is just shows up in VSCode.

Sidebar.vue

<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue

<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

Why is this? How do I solve this?

Edit: This is not an issue with the @ alias, those resolve correctly (in the screenshot the line above the error uses it, and I use it else-wear in the project), this error still shows up when using relative paths. My TSConfig has the appropriate "paths": { "@/*": ["src/*"] } item. If this was the issue compiling would also throw this error, which it does not, this is only present in VSCode.

Answer 1

This is because TypeScript does not resolve webpack aliases automatically.

For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:

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

Answer 2

For me, for a Vite & Vue 3 project in PhpStorm it was enough to create a shims file in the src directory. Most of my components use only script setup.

src/shims-vue.d.ts

declare module '*.vue';

Answer 3

In the Sidebar.vue file, try to add the ".vue" extension in import declaration , something like this:

import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';