Add path alias for typescript

Question

I am using create-react-app as scaffolding and tsconfig-paths as extension of my tsconfig because create-react-app is removing my paths when ran. I have been using this setup for a year now and I have no problems with it but recently when I created a project from scratch, it doesn't work anymore

tsconfig.json:

{
  "extends": "./tsconfig-paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": [
      "cypress"
    ],
    "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",
    "downlevelIteration": true
  },
  "include": [
    "src"
  ]
}

tsconfig-paths.json:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "components/*": ["./components/*"],
            "constants/*": ["./constants/*"],
            "pages/*": ["./pages/*"],
            "assets/*": ["./assets/*"],
            "actions/*": ["./actions/*"],
            "reducers/*": ["./reducers/*"],
            "layouts/*": ["./layouts/*"],
            "routes/*": ["./routes/*"],
            "utils/*": ["./utils/*"],
            "theme/*": ["./theme/*"],
            "api": ["./api"],
            "hooks": ["./hooks"],
            "formdocuments/*": ["./formdocuments/*"],
      "enums/*": ["./enums/*"]
        }
    }
}

scripts:

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

Answer 1

You must install craco-alias first. you have to has craco.config.js file. The file should be like this:

// craco.config.js
const CracoAlias = require('craco-alias')
module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                // baseUrl SHOULD be <specified></specified>
                // plugin does not take it from tsconfig
                baseUrl: './src',
                /* tsConfigPath should point to the file where "baseUrl" and "paths" 
              are specified*/
                tsConfigPath: './tsconfig.paths.json',
            },
        },
    ],
}

Then you must create tsconfig.paths.json file in root of project. This file has path alias such as:

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

in tsconfig.json file that created in root of project, you must extends tsconfig.paths.json.

tsconfig file has below content:

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "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"
  ]
}

suppose that you have components folder that inside of it has Sample/index.tsx directory. you can import Sample component by

import Sample from '@components/Sample'

Answer 2

Here is a work around

Path alias are no longer supported

you can do this instead, To simplify import paths, you can directly import files relative to the src directory

go to your tsconfig.json file add base URL to be "."

"compilerOptions": {
    "baseUrl":".",
    ...

then you can directly import stuff from the src directory

import Myfile from "src/myfile.js"