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

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.)