DEV Community


Posted on


Finally, Use Your TypeScript Aliases in Parcel v2

Do you have a webpack setup you've labored over, but want to try parcel? Blocked on migration because Parcel doesn't resolve tsconfig aliases?

Now you can, in the spirit of (almost) zero-config. Just install parcel-resolver-tspaths and follow the instructions.

How Parcel is Out-of-the-Box

Parcel is supposed to be a fun zero-config build tool. That bubble bursts when you discover that your TypeScript path aliases force you into tooling-specific configuration yet again.

If we look at the Parcel docs for module resolution and aliases:

Aliases are supported through the alias field in package.json.

// package.json
  "alias": {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    "local-module": "./custom/modules"

But lets not make a mess of things. Tsconfig aliases don't belong in package.json, especially when you can't easily auto-generate them.

You might keep scrolling and see the section titled "TypeScript ~ Resolution", followed by a promising tsconfig.json with some paths, and think they do actually support it. Well, they don't. This issue opened in 2017 leads me to believe they don't plan to.

Enter parcel-resolver-tspaths for Parcel v2.

This plugin finally enables you to use your tsconfig path aliases as-is. Go forth without even more tooling-specific configuration.

Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!