What you'll have at the end

The same @/ import working in the editor, the dev server and the production build

Before you start

You need

A Vite and TypeScript project with an alias like @/ already mapped in the project's own compiler settings and used in at least one real import.

Not covered

Getting the exact same alias working inside a separate test runner or a Node script outside the bundler, which each read module specifiers through their own, different resolver.

Leans on

TypeScript Cheat SheetIts Modules & Imports table covers the compiler's own path-mapping option and states plainly that it only steers type checking, never what gets emitted.
Vite Cheat SheetIts Configuration File and TypeScript Support tables cover both the manual alias option and the newer option that reads the compiler's own map directly.

Where to go next

Why can't TypeScript find types for a package you just installed?

for when the checker itself is unhappy about a missing shape, rather than the bundler being unable to find a file the checker already accepted.

Why your Vite build 404s right after deploy

for when every asset 404s right after a deploy instead of one aliased import failing to resolve, which is a base-path problem rather than a mapping one.

Fix an import alias that works in the editor but fails the build

Before you start

Where to go next

Fix an import alias that works in the editor but fails the build

Before you start

Where to go next