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.


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

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


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

├── 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.

├── ...
├── 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.




Fullstack JavaScript Developer | UI&UX Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What To Look for in a Cloud Services Provider?

Lambda Bi-Weekly Report- Consensus network upgrade to v 0.2.8 version

Top Javascript Machine Learning libraries in 2019

Is SOC2 compliance right for your organization? What’s the best way to start?

The 100th Scraping Tutorial You’ll Probably Read

Got ever ready Code-Base ? Achieving Friction less Continuous Integration on Salesforce

Creating Google Cloud Pub/Sub publishers and subscribers with Spring Cloud GCP — Part 2…

5 Phases Any Project Must Go Through To Succeed — Implementation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian-Gabriel Manduc

Adrian-Gabriel Manduc

Fullstack JavaScript Developer | UI&UX Enthusiast

More from Medium

How to add apple-app-site-association and assetlinks.json files in NextJs and ReactJs.

Javasc-ordle, making a JS function guessing game with React

React Components(React Bileşenleri)

[Solved] SyntaxError: Unexpected token ‘.’ Jest Error for Next.js Apps