how to setup an absolute path in a React TypeScript project

To set up absolute paths in a React project you can follow these steps:

Install the required dependencies:

npx create-react-app my-app --template typescript
npm i cargo

Configure absolute paths:
make change on tsjsconfig.json and create carco.config.js file in the root directory of your React project with the following content:

tsjsconfig.json
configuring the baseUrl and paths in your tsconfig.json.

• The base directory for resolving module paths is the src directory, as the "baseUrl" is set to "src".

• Aliases for module paths are specified in the "paths" section. We've defined two aliases here:
  "@components/": This alias corresponds to the path./components/. For instance, the resolution of "@components/Button" would be "./components/Button".
  The alias "@utils/" corresponds to the./utils/ path.

• For instance, the resolution of "@utils/helpers" would be "./utils/helpers".

• Make sure to modify the paths and aliases in accordance with the organisation of your project.
  

{
   "compilerOptions":{
      "baseUrl":"src",
      "paths":{
//add paths line                          
         "@components/*":[
            "./components/*"
         ],
         "@utils/*":[
            "utils/*"
         ]
      },
      "target":"es5",
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "esModuleInterop":true,
      "allowSyntheticDefaultImports":true,
      "strict":true,
      "forceConsistentCasingInFileNames":true,
      "noFallthroughCasesInSwitch":true,
      "module":"esnext",
      "moduleResolution":"node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "noEmit":true,
      "jsx":"react-jsx"
   },
   "include":[
      "src"
   ]
}

caraco.config.js

The tsConfigPath property is set to "./tsconfig.json", indicating the file path where the TypeScript configuration (tsconfig.json) is located.

This file contains the "baseUrl" and "paths" configurations for alias resolution.

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

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                // baseUrl SHOULD be specified
                // plugin does not take it from tsconfig
                baseUrl: "./src",
                // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
                tsConfigPath: "./tsconfig.json"
            }
        }
    ]
};