CODEWITHSUNDEEP
reactjstypescripttsconfigcracotsconfig-paths
Ryan Garde
Ryan Garde

Reputation: 922

Add path alias for typescript

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"
},

Upvotes: 4

Views: 4477

Answers (2)

Abraham
Abraham

Reputation: 15630

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"

Upvotes: 2

saeed eivazi
saeed eivazi

Reputation: 914

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'

Upvotes: 3

Related Questions