How to get JSDOC to work with Vite alias?

Working with React 17 & Vite v5 & VS Code IDE

We want to use alias when importing components for ease of use. But when we use it, the jsDoc popup doesn't show any data. How to configure jsDoc to use recognise the alias?

In vite.config.js we have set up alias:

export default defineConfig(() => {
  return {
    define: {
      'process.env': {},
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
    server: {
      port: 3000,
    },
    base: '/',
    resolve: {
      alias: {
        components: '/src/components',
      },
    },
  };
});

But upon using it, the jsDoc does not work. If we use the "proper" paths, the jsDoc does work.

import Button from 'components/general/Buttons/Button';

const MainNav = () => {
 return(
   <>
    <Button> </Button>
   </>
 )
}

Example of what JSDOC shows:

But if we use ../Buttons/Button, jsDoc shows as it should.

So, how do we configure jsDoc to work with the alias?

edited to add IDE

Your IDE doesn't know about your Vite aliases, you need to define them for it too via a jsconfig.json or tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "components": "src/components"
    }
  }
}