Use Absolute Paths with React
Importing modules will never be easy

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