So I have started adding a jsconfig.json file to my react projects in VS Code to enable me to use imports like:

import { Home, Expenses, Invoices } from '@/views';

instead of:

import { Home, Expenses, Invoices } from '../views';

My jsconfig file looks like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "src",
    "paths": {
      "@/*": ["/*"],
      "@/components/*": ["/components/*"],
      "@/views/*": ["/views/*"],
      "@/styles/*": ["/styles/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

However one thing I have started to notice, is that whenever I do this I can no longer click on 'Home' say and be taken to the code/file. Instead it always brings up a popover that just shows references to the file. Nothing I click on within this reference popover will take me to the file. It looks like this:

Sometimes it doesn't even bring up the hover. It will just select the element in the open code block, if I click on the element it will just select the import at the top.

If I remove the '@' sign then everything works as intended.

Is there any way to use a jsconfig.json file with absolute imports/path alias' AND keep the ability to click on the import to go the file/code.