Use Absolute Paths with React

Importing modules will never be easy

An absolute path

Last updated on Jun 4, 2021.

Maybe this isn’t an issue for you but importing modules using absolute paths is something that I can’t live without.

In this article, I will walk you through adding support for absolute paths to your project using Webpack.

TL;DR:

Not into reading? Here is a link to a repo using create-react-app with absolute imports enabled. No eject is actually needed.

https://github.com/3tmaan/create-react-app-with-absolute-imports

By default, relative paths are the supported way of importing modules to React and other frameworks. You will usually see or write something like:

import MyModule from './MyModule';

That seems pretty clean! True, but what if you have a complex folder structure and want to go up in it? you can end up having something like:

import MyModule from '../../../components/MyModule'; 

That looks pretty ugly — but besides that, using relative paths has some major problems:

• The deeper it gets, the worse it gets
• It makes the code refactor pretty hard
• If you want to extract the code to an NPM module to be used externally, you have to change the entire codebase

What if you can make the previous code example look like this:

import MyModule from 'Components/MyModule';

Neat and pretty clean, right?

Well, implementing that behavior is straightforward. It can be done using a Resolver — a library that helps in locating a module by its absolute path.

In the Webpack configuration file, add resolve.alias in order to create aliases and to import modules more easily.

module.exports = {
  //...
  resolve: {
    alias: {
      Components: path.resolve(__dirname, 'src/components/')
    }
  }
};

For instance, all modules that live inside src/components/ can now use absolute paths.

Bonus

If for any reason you don’t want to touch your Webpack configurations or you are using create-react-app and you don’t want to use the eject command, you can use a Babel plugin called babel-plugin-module-resolver.
To activate this plugin, create a .babelrc file (if it’s not already part of your folders structure) and add this code to it:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      alias: {
        Components: './src/components')
      }
    }]
  ]
}

You can add as many aliases as you want.

Now with the .babelrc file in place, there are few steps remaining to make this functional because react-scripts which comes with CRA doesn’t let you override the Webpack config, the reason why you need 2 more packages that will provide all the low-level manipulations for your application.

npm install customize-cra react-app-rewired --dev
//or
yarn add customize-cra react-app-rewired --dev

Once installed you need to reconfigure the package.json.
The typical CRA script section looks like this:

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
}

It runs the react-scripts commands. However, you need to hook into react-app-rewired to actually redefine the configurations.

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

No need to change the eject script, by the way.

Last but not least, you need to create a config-overrides.js file, with the following code:

const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());

This will actually say to Webpack to use this custom .babelrc file.

That’s all :)

Will My Code Editor Recognize Those Paths?

Well, no…but to make your IDE smart enough to understand absolute paths while importing modules, you have to do the following:

For VSCode

Create a jsconfig.js and add the following code to it:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  },
  "exclude": ["node_modules"] 
}

For IntelliJ Idea

Right-click on the src folder and make the directory as a Resources Root.

With those configurations, you can start to enjoy importing your favorite modules.

Have fun coding!

Resources

Link to the repo:
https://github.com/3tmaan/create-react-app-with-absolute-imports