DEV Community

Zach
Zach

Posted on

6 4

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more