Absolute Path Import in React Typescript

January 23, 2022

Importing files without absolute path can be a pain especially if you have a deeply nested file path. So we want to go from: import ArticlesList from '../../components/ArticlesList' to import ArticlesList from 'components/ArticlesList'

In the projects tsconfig.json file just define baseUrl under compilerOptions. You may need to restart your code editor after the change.

{
  "compilerOptions": {
    ...,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

If you're using ESLint, you may need to specify that your paths are now relative to `src`

```json
{
  "eslintConfig": {
    ...,
    "settings": {
      "import/resolver": {
        "node": {          
          "paths": ["src"],
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      }
    }
  }
}