Absolute Paths for React Components
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.
- create a
.env
file in the project root - in it, add
NODE_PATH=src
- 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…
Sources: