DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Zach
Zach

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)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now