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.
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.
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.
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
yarn add @craco/craco
Next, create a craco.config.js file at the root of the project.
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.
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
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.