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 elsewhere 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.
In the Sidebar.vue file, try to add the ".vue" extension in import declaration , something like this:
import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';