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.