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)

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.