Today, I was working on a new React project at work and got really annoyed at writing import Component from '../../some/other/directory';. I got even more annoyed when my guessed path was wrong. And then I had to move some components around and do it all over again.

That’s when I decided to fix it.

I did some searching to see what options I had. There were plenty, but a lot seemed like poor solutions or relied on Webpack configuration. Since we used create-react-app to bootstrap this project, the latter wasn’t an option. We’ve been prepared to eject when necessary, but I was reticent to pull the trigger just for this.

Luckily, I found this pull request opened six days ago. Apparently, cra’s tooling already supports absolute imports out of the box, they just don’t advertise it. This PR just adds some documentation.

  1. create a .env file in the project root
  2. in it, add NODE_PATH=src
  3. remove the .env file from the .gitignore

Start serving your app and test it out on src/index.js. You can change import App from './App'; to import App from 'App'; and it should still work!

It might not seem like a huge change with this example, but the implications are huge. Say you have a deeply nested component at /src/path/to/my/Component.js. Now you can import it in any other file of your app with import Component from 'path/to/my/Component';. Hurray! No more ..s or guessed file paths. And if you ever have to move that component, you can do a global find and replace for the new import path.

Breathe easy knowing your app is a little more future-proofed.

Update: 2017-03-21

A little while later, I tacked on some extra linting for code style to help the team out. It’s a little annoying without access to create-react-app’s config files, but it worked. However, Airbnb’s eslint config doesn’t like my absolute imports. I thought the rules were important and didn’t want to ignore them, but I couldn’t figure out how to fix it without breaking into webpack’s config. So we have these everywhere now…

import React from 'react';
/* eslint-disable import/no-unresolved, import/no-estraneous-dependencies */
import MyComponent from 'path/to/MyComponent';
import 'OtherComponent.css';
/* eslint-enable import/no-unresolved, import/no-estraneous-dependencies */

Sources: