[Babel] Module resolver
tl;dr
A blogpost that demonstrate how to use babel-plugin-module-resolver
? How babel-plugin-module-resolver
help developers write better file path ?
Outline
- Problems
- Install and configure
babel-plugin-module-resolver
- Configure
jsconfig.json/tsconfig.json(TypeScript Project)
- Configure
.flowconfig
(for flow-type project) - File path IntelliSense extension in VS Code
#1 Problems
In my React Native project, I used to import the component as below,
import SomeComponent from "../../../SomeComponent"
Using the ../
– dot notation or relative file path to access the component that I put in another folder. If having a large amount of folder or deeply nested folder structure.
It make the code hard to read and most of the time, I can’t recalled where is that component belong to.
So, babel-plugin-module-resolver
come to rescue. With babel-plugin-module-resolver
, I can write better file path for my React Native project as below:
import SomeComponent from "@shared/SomeComponent";
or
import HomeScreen from "@screens/HomeScreen";
This is the magic power from babel-plugin-module-resolver
.
#2 Installation and configuration
Using npm
,
npm install --save-dev babel-plugin-module-resolver
or using yarn
,
yarn add --dev babel-plugin-module-resolver
Add below configuration to babel config file – .babelrc
or babel.config.js
...
plugins: [
[
'module-resolver',
{
root: ['./],
alias: {
'@screens': './src/screens',
'@shared': './src/shared'
}
}
]
]

Now, we can import the Home
or Body
component by using below syntax
import Home from "@screens/Home";
or
import Body from "@shared/Body";
#3 Configure jsconfig/tsconfig
Next, configure the jsconfig.json
or tsconfig.json
file. If not exist, you can create one. This is to enable the IntelliSense for the editor (At least for VS Code)
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@screens/*": ["./src/screens/*"],
"@shared/*": ["./src/shared/*"]
}
}
}
This way we can tell the editor which directory the editor should look into. So that we can have the editor to look for the definition for us.
** tsconfig.json
if your project is TypeScript based.
#4 Configure .flowconfig
Using flow-type
in your JavaScript ? Chances are you will get warning, such as Cannot resolve module
.
Add following configuration into your .flowconfig
module.name_mapper='^@screens/\(.*\)$' -> '<PROJECT_ROOT>/src/screens/\1'
module.name_mapper='^@shared/\(.*\)$' -> '<PROJECT_ROOT>/src/shared/\1'
module.name_mapper=pattern -> mapped directory
Pattern
– Regex or specific path pattern.Mapped directory
– The directory flow-type will look for whenever met the pattern we specified
#5 File path intellisense extension (VS Code)
Before configure the babel module resolver, I’m using an extension – Path Intellisense which can help me autocomplete the filename. It’s an useful extension that greatly improve my productivity.
Take away
- Using
babel-plugin-module-resolver
to resolve messy file path - Configure
jsconfig.json or tsconfig.json
for intelliSense (autocomplete feature) - Configure
.flowconfig
for flow-type to resolve module correctly
Thanks for reading and have a nice day. 😁
Feel free to let me know, if this article is useful.