I don't like to use relative paths in the imports, sometimes can be very difficult to calculate the depth of certain files. The babel-plugin-module-resolver package can help us to add a custom alias for our directories. For example:
// Instead of importing like this import { isMobile } from '../../../shared/utils/device'; // Using module resolver you can use an alias like: import { isMobile } from '@utils/device';
As you can see, using an alias is more consistent, and it does not matter in which path you are importing the util always will be the same path using the alias, it's cool, isn't it?
First, we need to install the package:
npm install babel-plugin-module-resolver
Then in our .babelrc, we can add our aliases for ...