نحوه تنظیم یک مسیر مطلق در پروژه React TypeScript

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

{
   "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"
   ]
}

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"
            }
        }
    ]
};