How to use module alias in React js with typescript (`CRA`)

TLDR,

First you need to create React application using Create React App (CRA)

$ npx create-react-app testing-alias --template typescript
# Or 
$ yarn create react-app testing-alias --template typescript

Next Well add an override to the default webpack
We'll use craco to run our application instead of react-scripts
You'll also need craco-alias to resolve the alias paths

$ npm i craco
$ npm i -D craco-alias
#Or
$ yarn add craco
$ yarn add -D craco-alias

Create a file named craco.config.js and add the following code.

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.paths.json",
      },
    },
  ],
};

Create a new file namedtsconfig.paths.json and add the following

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@pages/*": ["./pages/*"],
      "@api/*": ["./api/*"],
      "@base/*": ["./*"]
    }
  }
}

Then in your tsconfig.json add this line

{
  "compilerOptions": {
    ...
  },
  "extends": "./tsconfig.paths.json",
  "include": ["src"]
}

My directory structure

Finally modify your package.json

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

In the App.{js|ts} you import the given component and the run your application using yarn start or npm start

In conclusion we've learnt to add module aliasing to our react js packages using absolute imports. It's easier this way given the growth of your application may have and also having similar names in either pages or components conflict is avoided. It's easier this way since you don't need to eject your react app

Thanks to reading