Using Import Aliases in React JS/TS

Photo by Chester Zhao

Import aliases play a major role in keeping the codebase clean. But integrating it inReact project is a headache. This article assumes that you already know how to write import aliases. We will cover the integration part in this article.

Installing Dependencies

Let’s add the dependencies by running the following command:

yarn add --dev react-app-rewired react-app-rewire-alias

Javascript

You can skip this step if your project uses typescript.

Create jsconfig.json file inside the root directory.

jsconfig.json

Update package.json and replace react-scripts with react-app-rewired.

package.json

Create config-overrides.js file in the root directory with following code.

config-overrides.js

Typescript

You can skip this step if your project uses javascript.

Create tsconfig.alias.json file inside the root directory.

jsconfig.json

Add the following line inside the tsconfig.json file.

Add the following inside tsconfig.json file

Update package.json and replace react-scripts with react-app-rewired.

package.json

Create config-overrides.js file in the root directory with following code.

config-overrides.js