Path Aliases in React + TypeScript

If you are a clean freak, you might have thought about cleaning up your paths as well. A way to shorten them is via path aliases. Today we will look at how we can do that in React + TS + craco combination.

In your tsconfig.json file, add the following

"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@components": ["components/index.tsx"],
    "@icons": ["assets/icons/index.tsx"]
  }
  // other options ...
}

The baseUrl tells what is the starting point for the files. The paths allows us to create aliases.

This is what my folder structure looks like —

src/
  components/
    - Button.tsx
    - index.tsx // uses barrel export
  assets/
    icons/
      - Logo.tsx
      - index.tsx

And this is what I am trying to achieve. It makes the code cleaner and easier to maintain.

import {
  KeyboardIcon, KeyboardLgIcon,
  DarkKeyboardIcon, DarkKeyboardLgIcon,
  MoonIcon, SunIcon
} from "@icons";

If you created your project using CRA (Create React App), then you won’t be able to customise the webpack configuration. For that, you will need to eject your app. But doing so makes it difficult to maintain your project too.

Enter CRACO!