DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Cleaning up imports using module resolver in React Native
Karan Pratap Singh
Karan Pratap Singh

Posted on • Updated on

Cleaning up imports using module resolver in React Native

Hello, React Native Community!

During a recent interview, my interviewer said "I went through some of your code on Github, seems good and all but why aren't you using a module resolver? Do imports not get messy?"

I remember thinking "Oh this makes sense, why am I not doing this?", because coincidentally enough recently I started using Babel module resolver in a project I was doing for a client but not my own portfolio projects.

Why do I need another babel plugin?

So, the idea of a module resolver is to improve code readability and developer experience as it's easier to import your components. Also, it is very good for projects which are scaling fast.

Let's consider an example:

import Module from '../../../Module'
Enter fullscreen mode Exit fullscreen mode

The above can be simplified into:

import Module from 'components/Module'

// similarly

import Module from '@components/Module'
Enter fullscreen mode Exit fullscreen mode

And if you have configured an index.ts, it's like a cherry on top

import { Module } from '@components'
Enter fullscreen mode Exit fullscreen mode

Getting started

yarn add --dev babel-plugin-module-resolver

# or if you use npm

npm install --save-dev babel-plugin-module-resolver 
Enter fullscreen mode Exit fullscreen mode

After installing the plugin we need to update babel.config.js (you can also use .babelrc) and add 'module-resolver' to the list of babel plugins.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@app/config': './app/config',
          '@app/context': './app/context',
          '@app/constants': './app/constants',
          '@app/layout': './app/layout',
          '@app/navigation': './app/navigation',
          '@app/screens': './app/screens',
          '@app/theme': './app/theme',
          '@app/utils': './app/utils'
        },
      },
    ],
  ],
};

Enter fullscreen mode Exit fullscreen mode
  • root specifies your project main directory. Usually, it is called 'app' or 'src'.
  • extensions allows you to limit the plugin to specific file types.
  • alias lets you specify all the folders you need shortcuts for your module imports.

The above example is from one of my projects.
As you can see, we can easily configure this for any type of folder structure.

If you're starting a fresh project and looking for a clean boilerplate with a good folder structure, then you can check out react-native-boilerplate

Now with the integration completed, let's now make sure our auto-completion and IntelliSense works as well.


Note: Multiple major IDE's are supported, you can have a look at the plugin's repository babel-plugin-module-resolver for more information.


If you are working with typescript then add the following fields to your tsconfig.json (Isn't typescript just awesome?)

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "*": ["./app/*"],
      "@app/utils": ["./utils/*"],
      "@components": ["./components/*"]
    }
   ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Or, if you're rocking javascript just simply add a jsconfig.json to your project and add the above fields so you can still get auto-completion.

Note: Please make sure to put the paths into square brackets []. Otherwise, TypeScript won’t be able to locate the paths properly.

  • Running the project

After setting up the plugin, we now need to make sure it's working.
Before you start changing your imports we need to do the following:

  • Cleaning build folders for android and ios
rm -rf ios/build android/app/build
Enter fullscreen mode Exit fullscreen mode
  • Resetting cache for npm or yarn
yarn start -c

# or if you use npm

npm start --reset-cache
Enter fullscreen mode Exit fullscreen mode

Now you should be able to build your project and start changing the import.

Note: If you are still facing the issue with cache, recheck your babel.config.js and tsconfig.json and try the command below to clear watchman.

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start --reset-cache
Enter fullscreen mode Exit fullscreen mode

If you're looking for an example, then checkout this commit on one of my project.

Hope this article was insightful and helped you improve code readability and the experience for you and your team.

Did you face any issues during the integration? Feel free to leave a comment or reach out to me via twitter.

Happy Coding! πŸŽ‰

Top comments (2)

Collapse
 
khandaniel profile image
Daniel Khan

Thanks, I would never do it by myself

Collapse
 
carinlynchin profile image
carinlynchin

OMG. THANK YOU.

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!