Path aliases in Create React App (v4) without ejecting

As soon as a React application starts growing in size and complexity, various problems also arise. One of those is managing module imports, especially when the codebase contains several folders, nested on multiple levels. Very often you’ll end up having very long import statements using relative paths.

Imports hell

In this post, we’ll explore using Webpack path aliases to solve this issue, allowing for much cleaner import statements, which will also make refactoring significantly easier.

Imports using aliases

This guide assumes that you’ve got Node >= 8.10 and npm >= 5.6 installed on your machine

Creating an app

Create React App (CRA) is a very popular tool for scaffolding React web apps. It gives developers a big advantage, by allowing them to scaffold a production ready React application blazingly fast, without having to spend additional time on setup or complex configuration of tools such as Babel or Webpack.

To create an app, you need to run a single command in a terminal:

npx create-react-app awesome-app

This will create a folder awesome-app with all the required filed to get you started, including some pre-installed dependencies.

By exploring the contents of this folder, you can see that by using CRA all the configuration layer is hidden from the user. This is most of the times great, and has a lot of advantages, however it also brings up some disadvantages, such as the ability to modify these configurations.

A possible solution to customize the config is by ejecting, however this can problematic as it cannot be reverted and moves the responsibility of managing and keeping up to date all the required configuration on the developers’ shoulders.

Using craco

craco (Create React App Configuration Override) is a package that allows developers to customize the underlying configuration of CRA without ejecting. We will be using craco to modify the Webpack configuration in order to create path aliases.

Installation

First, navigate to the root folder of your application and install the plugin from npm using npm install or yarn add .

cd awesome-app
npm install @craco/craco --save
# OR
yarn add @craco/craco

Configuration

Next, create a craco.config.js file at the root of the project.

awesome-app
├── node_modules
├── ...
└── craco.config.js

In this file, we will be adding the Webpack path aliases:

To be able to use these aliases, you will have to create an assets folder and an images folder inside it, in the src folder from the root of your project. Similarly, you should create a components folder inside the src folder.

...
src
  ├── ...
  ├── components
  ├── assets
      ├── images

Update package.json scripts

Next, you will have to update the existing scripts in the package.json file to use craco instead of react-scripts.

Run the application

npm start

This is it! You should now be able to use the path aliases inside your components.

Bonus: VS Code IntelliSense Support

By using a jsconfig.json file, you can help VS Code recognize the paths and give autocomplete suggestions.

To do this, you need to create a jsoconfig.json at the root of your project:

By using the exclude property , VS Code IntelliSense does not get slowed down by performing the search in unwanted locations (such as node_modules).

Tip: If you are using a jsconfig.json file, instead of manually adding the aliases inside the craco config file, you can use the craco-alias plugin.