Menggunakan Alias @ dalam Typescript dengan Vite.js

npm create vite@latest react-app -- --template react-ts

├── tsconfig.json
└── vite.config.ts

{
    "compilerOptions": {...},
    "include": [...],
    "references": [...]
}

{
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "@/*" : ["src/*"]
        }
    },
    "include": [...],
    "references": [...]
}

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

export default defineConfig({
    plugins: [react()],
});

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

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
    },
});

import React from 'react';
// import NavLink from '../components/NavLink';
import NavLink from '@/components/NavLink';

const Navbar = () => {
    return (
        <nav className='flex min-h-screen flex-col justify-between bg-blue-600'>
            <NavLink href='/'>
                Home
            </NavLink>
        </nav>
    );
};

export default Navbar;

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

/** @type {import('vite').UserConfig} */
export default defineConfig({
    plugins: [react()],
    resolve: {
        // @ts-ignore
        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
    },
});