Alexander Schaaf

TypeScript path aliases and esbuild

I just ran into an issue using esbuild with path aliases in my TypeScript project. Build times of my project were getting slow enough to annoy me, so I was switching over to use esbuild instead of the default TypeScript compiler tsc to speed things up (by a lot). But my import path aliases, as defined in my tsconfig.json, were not being resolved correctly.

// tsconfig.json
{
    // ...
    paths: {
        "@lib/*": ["src/lib/*"],
    }
}

Turns out imports using aliases like import { ... } from "@lib/... will only work in the output JavaScript when using the --bundle flag. This flag tells esbuild to combine all imported dependencies into one single JavaScript file (called inlining).