Add path alias for typescript

user_15782119 0
Viewed 3002

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"
},
tsconfig-paths craco tsconfig typescript reactjs
2 Answers

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'
user_64987920

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"
user_144870320
Related