Using path aliases for cleaner React and TypeScript imports
Tags: react, typescript
Published: 2023-08-22 13:59:46

**Written by [Oghenetega Denedo](https://blog.logrocket.com/author/oghenetegadenedo/)✏️**

React and TypeScript have become popular among developers for building scalable, maintainable, modern web applications. 

However, as projects grow in size and complexity, import statements can become messy. In particular, the default relative path imports can quickly become long and hinder code readability. 

Thankfully, there is a solution to this problem: configuring path aliases. 

In this article, we will explore how to leverage path aliases to enhance the organization and maintainability of your React and TypeScript projects. We will cover:

*   [Understanding import statements in React and TypeScript apps](#understanding-import-statements-react-typescript-apps)
*   [How path aliases can help simplify import statements](#path-aliases-help-simplify-import-statements)
*   [Configuring path aliases in the `tsconfig.json` file](#configuring-path-aliases-tsconfigjson-file)
*   [Best practices for using path aliases](#best-practices-using-path-aliases)
*   [Resolving path alias errors when using Create React App](#resolving-path-alias-errors-create-react-app)

To follow along with this tutorial, you’ll need basic knowledge of JavaScript and TypeScript, along with some familiarity with React. You should also have an existing React and TypeScript project, and make sure Node.js is installed on your machine.

## Understanding import statements in React and TypeScript apps <a name="understanding-import-statements-react-typescript-apps">

In React and TypeScript apps, developers use import statements to bring in functionality from other modules or files. This practice ensures we develop software that’s highly reusable and modular. 

Although import statements are very useful in this regard, they can lead to problems when they aren’t used properly. The code snippet below shows a typical example of this problem:

```typescript
import React from 'react';
import { Button } from '../../../../components/button'; // long and messy import :(

function SomeComponent() {
  return <Button />;
};
```

As you can see, this code snippet uses relative imports from the current file to import the `Button` component. However, this import pattern is messy because it’s importing the component from a deeply nested directory. 

For projects that are relatively small in size, this might not pose much of an issue. But as the project scales, typing and reading long import paths becomes tedious. 

In addition, refactoring the project becomes challenging when the directory structure of the imported module changes since it’s tightly coupled to the project file structure.

## How path aliases can help simplify import statements <a name="path-aliases-help-simplify-import-statements">

Path aliases let developers define custom shortcuts for import paths, making them cleaner and more intuitive. With path aliases set up, you can have clean and concise imports regardless of the size of the project, as shown in the code snippet below:

```typescript
import React from 'react';
import { Button } from '@components/button'; // clean and concise import :)

function SomeComponent() {
  return <Button />;
};
```

By setting up path aliases in a React and TypeScript app, you can simplify import statements, improve code navigation, and enhance the overall development experience.

## Configuring path aliases in the `tsconfig.json` file <a name="configuring-path-aliases-tsconfigjson-file">

You can configure path aliases easily in your project’s `tsconfig.json` file. This file is usually found at the root of a TypeScript project. 

To configure your path aliases in this file, simply add a `paths` property in [the `compilerOptions` object](https://blog.logrocket.com/exploring-advanced-compiler-options-typescript/). Then, you can map path alias names to file paths as shown in the code snippet below:

```typescript
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

The above code tells the TypeScript compiler to resolve imports from the `@/*` alias to the `./src/*` directory. Once you set up the path alias, you can use it in your import statements. 

For example, you can import a `Button` component in the `src/components` directory directly from anywhere in the project like this:

```typescript
import { Button } from "@/components/Button";

function App() {
  return (
    <Button>Click Me</Button>
  )
}
```

Without a path alias set up to import the `Button` component from another file — for example, `src/pages/dashboard/profile/settings/index.tsx` — would look something like this:

```typescript
import { Button } from '../../../../components/Button';

function Settings() {
  return (
    <Button>Click Me</Button>
  )
}
```

You can take this a step further and add more path aliases, which can be beneficial for large projects that store critical parts of the app in well-defined directories. In the `tsconfig.json` file, update the `paths` field as shown in the following code snippet:

```json
{
  "compilerOptions": {
    "baseUrl" : "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@ui/*": ["./components/common/ui/*"],
      "@pages/*": ["./pages/*"],
      "@hooks/*": ["./hooks/*"],
      "@api/*": ["./api/*"],
      "@utils/*": ["./utils/*"],
    }
  }
}
```

The `baseUrl` field in the code snippet above is used to make the path aliases shorter to write.

## Best practices for using path aliases <a name="best-practices-using-path-aliases">

Path aliases can help to significantly improve the readability and conciseness of import paths in your projects, but they have to be used in the right way to maximize their benefits. 

Here are some of the best practices for using path aliases in your React and TypeScript projects:

*   **Be explicit and descriptive**: Your path alias names should clearly represent the contents of the directory or module they’re aliased. For example, use `@components` instead of `@c` to define an alias for components stored in the `components` directory
*   **Stay consistent**: Maintain a consistent naming convention for your path aliases throughout the project. For instance, if you use `@components`, stick to a similar naming pattern like `@utils`, `@api`, etc. This consistency can help other developers understand and remember the aliases
*   **Avoid collisions**: Ensure your path alias doesn’t clash with the names of installed packages in the `node_modules` directory. It’s good practice to always use unique names for your path aliases to prevent such conflicts
*   **Consider project size and complexity**: It’s crucial to evaluate the size and complexity of your project before adding too many path aliases, which could potentially lead to overhead. For smaller projects with a very limited number of modules, a path alias might not be needed

Following these best practices can help you leverage the benefits of path aliases without running into drawbacks and errors.

## Resolving path alias errors when using Create React App <a name="resolving-path-alias-errors-create-react-app">

If you’ve been following this tutorial with a React and TypeScript project [set up with Create React App (CRA)](https://blog.logrocket.com/getting-started-with-create-react-app/), you might encounter an error like the following: ![Uncaught Runtime Error Example When Using Create React App To Develop React And Typescript Project Explaining That Module Can't Be Found Because Webpack Can't Resolve Imports Defined Using Path Aliases In The Json File](http://blog.logrocket.com/wp-content/uploads/2023/08/Path-alias-errors-Create-React-App.png) This error occurs because webpack can’t resolve imports defined using the path aliases in the `tsconfig.json` file. 

An easy fix for this error is to [update the webpack configuration](https://blog.logrocket.com/versatile-webpack-configurations-react-application/) to resolve the path alias. However, the default CRA setup doesn’t provide support for modifying the webpack configuration without ejecting, which can be inconvenient. 

Fortunately, the CRACO package provides a convenient way to modify configurations for ESLint, Babel, and webpack in a CRA project without needing to eject.

### Exploring the CRACO package

CRACO stands for Create React App Configuration Override. This open source project was created to address limitations in customizing and extending CRA. 

By default, when you eject a CRA project, you’re responsible for maintaining the configuration files and scripts required for your project to work. This responsibility can make updating and maintaining the project difficult in the future. 

CRACO frees you from this burden by providing a single config file for overriding and extending the default configurations of CRA while also retaining its simplicity and abstraction layer. We’ll explore how to do so in the next section.

### Setting up and using CRACO in a CRA project

Let’s first install CRACO in the CRA project by running the command below:

```bash
npm i -D @craco/craco
```

Next, create a `craco.config.js` file at the root of the project and add the following configuration:

```javascript
const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};
```

Update the `scripts` field in the `package.json` file with the following to use the `craco` CLI instead of `react-scripts` for the `start`, `build`, `test`, and `eject` scripts:

```json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test":  "craco test",
    "eject": "craco eject"
 }
```

After you complete the steps above successfully, webpack should be correctly configured to work with your defined path aliases. This configuration will ensure no errors will occur due to unresolved import paths.

## Conclusion

Configuring path aliases in a React and TypeScript app is a powerful technique that can significantly improve code readability and organization. 

By defining custom shortcuts for import paths, you can simplify your imports and make them more intuitive. Path aliases not only make code navigation easier but also reduce the likelihood of errors caused by complex relative paths. 

Embracing path aliases in your React and TypeScript projects can significantly enhance the development experience, leading to cleaner and more maintainable code in the long run.

---

## Get set up with LogRocket's modern React error tracking in minutes:

1. Visit https://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag. `LogRocket.init()` must be called client-side, not server-side.

NPM:
```bash
$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');
```
Script Tag:
```javascript
Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
```

3.(Optional) Install plugins for deeper integrations with your stack:
*   Redux middleware
*   ngrx middleware
*   Vuex plugin

[Get started now](https://lp.logrocket.com/blg/signup)