Custom import paths and how it can help you

making your imports more elegant and organized

If there's a pain that bothers me when I'm developing an application with many files, it's when those files import other files, and that causes an excess of ../ in the imports of those files.

It is common to see that as our application grows, the folders of our project files are nested more and more inside other folders, and when we least expect it we come across the following import example:

import ExampleComponent from '../../../../../../src/components/ExampleComponent/'

The example above is real and is much more common than we think. Unfortunately, the excessive use of these ../ brings some pain when we need to maintain our code, among them, the rework of fixing the relative path every time we need to change the location of an imported file or import file.

One of the simplest ways to make this import more elegant and organized is to create a custom path and leave it as an absolute. Thus, the example above could look like this:

import ExampleComponent from '~/components/ExampleComponent/'

In the example above, the ~ prefix was set as an absolute path to a directory in our project, in this case the directory is the src folder. That way, no matter what folder our file is in, when we use the ~/ prefix, we will always be importing the absolute path of the src folder.

Really good right?!

Making it happen

Installing dependencies

First of all, we'll need to install and configure three dependencies for this magic to work. And they are:

react-app-rewired and customize-cra

At the root of our project, let's run the command below to customize the webpack settings without the need to use eject and without the need to create a react-scripts fork.

yarn add -D react-app-rewired customize-cra

babel-plugin-root-import

Now let's run the command below to import files using custom paths.

yarn add -D babel-plugin-root-import

Creating config-overrides.js

Also at the root of our project we will create a file called config-overrides.js. He will be responsible for establishing the root folder of our project.

Let's insert this code into the file:

const { addBabelPlugin, override } = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
)

Making life easier for the dev editor

Still at the root of our project, we will create a file called jsconfig.json. He will be responsible for making VSCODE understand the custom paths.

Let's insert this code into the file:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

Last details

Lastly, we will update the scripts in the package.json file. Leave them this way:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

As you can see, we are replacing all react-scripts with react-app-rewired with the exception of the eject script.

All ready!

Now we can use any file inside our src folder using ~/ at import time.

import ExampleComponent from '~/components/ExampleComponent/'

And...

If you want to see this example in practice, you can take a look at the template I created for React projects here:

diegosilvatech / boilerplate-cra-typescript

This project is a boilerplate for React project. This template was built with ReactJS and TypeScript.

---

Comment there what you think about this approach in our imports :)

---

Comments

[Richard Kichenama]

Keeping in a stack of TS React, Jest, and Webpack

package.json (for jest)

"moduleMapper": {
  "^src/(.*)": "<rootDir>/src/$1"
}

webpack.config.js

module.exports = {
  "context": path.join(__dirname, '/src'),
  ...
}

allows for import Component from 'src/folder/moduleName';