Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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.
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';
–
–
–
I've installed TypeScript Vue Plugin (Volar) VS Code extension and the problem was solved.
Remember to disable this VS Code built-in extension: TypeScript and JavaScript Language Features. You could read more here.
In your project workspace, bring up the command palette with Ctrl+Shift+P (for macOS: ⌘+Shift+P).
Type built and select "Extensions: Show Built-in Extensions".
Type typescript in the extension search box (do not remove @builtin prefix).
Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
Reload the workspace. Takeover mode will be enabled when you open a Vue or TS file.
(Optional) If you have set custom path alias for webpack or vite (or other module bundler), remember to add path alias for typescript support
tsconfig.json
"compilerOptions": {
/* other configs */
"paths": {
"@/*": [
"./src/*" // set path `@/*` as alias of `src/*`
/* other configs */
–
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
–
A bit late but make sure to use workspace version of TS in VSCode so that it loads local TS plugins.
Refer to this comment: https://github.com/vitejs/vite/issues/965#issuecomment-717248892
With VSCode, you can select your workspace TS Version:
If you use defineComponent in your *.vue files in Vue3 you can add a shim for example in typings/sfc.d.ts as
declare module '*.vue' {
import {defineComponent} from 'vue';
export default defineComponent;
If the Vetur extension is causing the error and you are using the tsconfig paths mapping, what worked for me was to create a vetur.config.js file at the top level folder specifying where to find the tsconfig.json file like below :
module.exports = {
projects: [
root: "./yourprojectdirectory",
tsconfig: "./tsconfig",
It seems like Vetur will try to look for a tsconfig.json at your root directory so if your project is inside a sub folder it won't be able to find it by itself.
https://vuejs.github.io/vetur/guide/setup.html#advanced
If you're using typescript and want to import component from external library in your vuejs project. This is how I solved my issue.
create index.d.ts file at src/
add this code -> declare module 'myAwesomeLib'
import component -> import {SomeMethod} from 'myAwesomeLib'
*.d.ts files are used to provide typescript type information about a module that's written in JavaScript.
I'm a bit late to the party, but since I had these problems as well, even if I had the correct paths settings, vite.config.ts and tsconfig.json files, I figured out that I hat do use the newer Volar extension in vue 3 projects, rather than Vetur, wich I had installed from my older vue 2 projects.
Uninstall or disable Vetur
Install Vue Language Features (Volar)
Install Typescript Vue Plugin (Volar)
--> See also https://vuejs.org/guide/typescript/overview.html#ide-support
If you are using Vue 3 you should add this into a type file like vue.d.ts:
declare module '*.vue' {
import type {DefineComponent} from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const component: DefineComponent<object, object, any>
export default component
You can see it working here: source
You must add generic types if you use VueTestUtils mount method.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
