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

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.

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": {
     "@/*": [
      "./*"
     ]
    }
  }
}

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

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

On my machine, VS Code extension Vetur produces the error message for my @/ imports in <script lang="ts"> Vue components in my multi-project repository.

Seems Vetur looks in the VS Code workspace top-level folder for the tsconfig.json. My Vue app, with its tsconfig.json, is in a sub-folder. Vetur does not pass along the correct settings when invoking the TypeScript compiler.

Solution 1 (temporary hack)

Start VS Code from inside the Vue project's root folder. (The same folder as the correct tsconfig.json.)

code .

Make sure the tsconfig.json contains the compilerOptions.baseUrl property in addition to the compilerOptions.paths property (Vetur FAQ).

This changes my VS Code settings and extension settings; as the project-level .vscode folder is no longer accessible. (I use symbolic links to keep the workspace-level and Vue-level .vscode folders in sync.)

Solution 2 (hack)

I have a single Vue project in my workspace, so I added a modified tsconfig.json file to my overall workspace folder, (the parent folder of my Vue application folder).

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["myVue/src/*"]
    }
  },
  "exclude": ["node_modules"]
}

I needed the "baseUrl" property in addition to the "paths" property (again Vetur FAQ).

I reloaded VS Code for changes to take effect.

The "exclude" property may not be required, but I am paranoid of Vetur's invocation of the TypeScript compiler wasting time on the node_modules folder.

Background

This may be related to the (currently) open Vetur issue Multi root support #424. (Summary: Vetur expects exactly one SPA in the VS Code workspace top-level folder.)

After adding the .vue extension on the import, I resolved this error by adding typescript shims for vue files.

I created a file in typings/sfc.d.ts containing this:

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

References: https://github.com/vuejs/vue/issues/5298#issuecomment-453036640