Escaping Relative Import Hell (React Native, ESLint, Atom)

Relative Import Hell

Relative Imports can be a real pain (especially for your ring / little finger) while development. Typing ‘../’ over & over again can be confusing as well as irritating.

Unless you absolutely love wearing out your ‘.’ & ‘/’ keys or you’re trying to build some abs on your fingers, you can save those extra keystrokes and escape the infamous relative import hell by using absolute imports.

Besides the extended keyboard life, there are other benefits of using absolute imports:

• It makes refactoring import paths a breeze.
• It saves you from the mental agony of trying to figure out how deep in the folder structure are you (improves productivity)
• Makes your imports significantly cleaner & easier to understand
• Makes it easier to move files around in the codebase

Let’s see how to set up absolute imports in our project

There are 2 steps in the process:

1. Tell the Bundler how to resolve absolute imports
2. Tell ESLint & Atom how to resolve absolute imports

The Bundler

React Native projects use Babel to transpile code before bundling it into something executable. We simply tell Babel to use the plugin babel-plugin-module-resolver to define a root directory that contains our modules (simply the folders in our code).

Although this plugin can also be used to define additional aliases for folders to gain even more control over how to resolve import paths, we’ll stick to the basics and simply add a root directory.

First, we add the babel-plugin-module-resolver plugin to our dev-dependencies

npm i -D babel-plugin-module-resolver

Then, in babel.config.js (or .babelrc) we simply add

plugins: [
      [
        'module-resolver', {
          root: ['./your-root-folder'],
          extensions: ['.js', '.ios.js', '.android.js']
        }
      ]
    ],

That’s it for the bundler, onto preserving our comfy dev experience

ESLint & Atom

The above step has gotten us from the relative imports to -

Absolute imports, but with Linting errors

The above steps will resolve the imports while bundling and our app will run fine, but our editor and linter will still say that the imports cannot be resolved.

To mitigate the Linting errors, we will first add eslint-plugin-import & eslint-import-resolver-babel-module packages to our dev-dependencies

npm i -D eslint-plugin-import eslint-import-resolver-babel-module

After this, we add the following to .eslintrc.js (or .eslintrc)

settings: {
    'import/resolver': {
      'babel-module': {}
    }
  },

And that’s it! We have escaped relative import hell and reached the following result -

Absolute Imports! Yay!

Bonus: Code Navigation (js-hyperclick)

js-hyperclick is an atom package that allows us to navigate to code definitions using shortcuts and mouse-clicks. Our steps have broken code navigation and while attempting to navigate to code definition, we will face an error.

Enabling code navigation again is pretty straightforward. We simply need to add the following line to our package.json

"moduleRoots": ["src"],

This should have js-hyperclick working again like a charm!