Visual Studio is highlighting imports with @

Question

I have this project in Vue3, TS, Vite and in VS Code (Typescript Vue Plugin (Volar), Vue 3 Snippets, Vue Language Features (Volar)) I have recently been getting this weird import error

import InputText from '@/components/form/InputText.vue';

When used this, I am getting -> Cannot find module '@/components/form/InputText.vue' or its corresponding type declarations.ts(2307)

even tho the import is successful and the app works fine ...

when I change it to relative path -> import InputText from '../form/InputText.vue' it works fine ...

any idea what could possibly happen and how to fix it? it's not causing any issues but visually drives me nuts

tsconfig.json

{
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

SOLUTION:

Found it .... I was missing files: [], in my tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}