NODE_PATH for avoiding ../../../

When copying out a big component with several subcomponents to a separate create-react-app project, I found myself using tons of relative imports. Counting up & overs sucks.

To help with this, create a .env file in the root of your create-react-app project. Inside this file, add this line:

or you can do it all at once on the command line with echo 'NODE_PATH=src/' >> .env

Sidenote: the >>operator will append to the end of the file in case you already have a .env file with stuff in it, like if you’re using custom-react-scripts to enable bonus features in your CRA.

So yeah, now you can go through your components and clean up all the relative imports as applicable. Remember though, depending on how things are nested it may make more sense to use a ../ instead of components/Parent/components/Child. Use your best judgement. I trust you.

Check out my other articles, or sign up for my newsletter:

No spam. Just code stuff, unsolicited music recommendations, etc.