Moving from messy relative paths like `../../../components/Button` to absolute imports cleans up large React codebases. For projects using Vite and TypeScript, simply updating `tsconfig.json` isn't enough. You must align the TypeScript compiler with the Vite bundler to avoid build errors and ensure tooling works correctly.

The first step involves configuring TypeScript paths. In modern Vite templates, you should add aliases to `tsconfig.app.json` instead of the root config. With TypeScript deprecating `baseUrl`, the modern approach removes it entirely, using a `./src/*` prefix. This keeps your configuration current and avoids silencing deprecation warnings.

Next, configure Vite's resolver so the bundler understands your alias. Open `vite.config.ts` and add the `resolve.alias` property, mapping `@` to `/src`. While TypeScript handles editor autocompletion and type checking, Vite needs this mapping to resolve modules during development and production builds. Syncing both files creates a seamless workflow.