React + Vite : Problem with path aliases, not recognising the @ character

Issue

I'm starting a project with React using Vite and I have a problem with the path aliases if I want to use the @ character.

This is my code:

tsconfig.json

....
"baseUrl": "./src",
/* Paths */
"paths": {
   "@/*": ["./*"]
}
...

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src/'),
            services: `${path.resolve(__dirname, './src/services/')}`
        }
    }
});

MyComponent.tsx

It works:

import { DB } from 'services/db';

Not working:

import { DB } from '@services/db';

Error: Cannot find module '@services/db' or its corresponding type declarations

What am I doing wrong?

Thanks!

Solution

It probably would work using

import { DB } from '@/services/db';

Because you are mapping the @ character with the ./ path.

Answered By - Mirco Bellagamba