Absolute vs. Relative import paths (NodeJS)

Everyone’s heard about the infamous “relative path hell” in NodeJS, and while there are a lot of different solutions out there, none is standard (cough) nor cross platform and almost all feel hacky.

NPM local paths are great but they require you to increment the local package version every time you edit one of the files, not ideal during development fast iterations and refactoring.

Anyway, regardless of the solution you choose to implement absolute import paths in your project, you might reconsider using it all the time.

Note

What we call “absolute paths” here, are in fact “paths relative to the project root”.

Absolute paths PROs

Easier to move files around

When using so-called absolute paths and moving a file around, you don’t have to worry too much about updating its inner import paths. Consider this example.

// ./src/views/scenes/home/search-bar.js

// Absolute
import TextInput from "src/views/atoms/text-input";
import Button from "src/views/atoms/buttons";

// Relative
import TextInput from "../../atoms/text-input";
import Button from "../../atoms/buttons";

Now if you move search-bar.js to ./src/views/molecules/, you won’t need to update the absolute import paths, but must update the relative ones:

// ./src/views/molecules/search-bar.js

// Absolute
import TextInput from "src/views/atoms/text-input";
import Button from "src/views/atoms/buttons";

// Relative
import TextInput from "../atoms/text-input";
import Button from "../atoms/buttons";

Easier to refactor import paths

Let’s say you want to rename a Component ./src/views/molecules/search-bar.js to search-box.js. “Find & Replace” will be much easier when searching for absolute vs. relative paths:

• Absolute. Search for import SearchBar from 'src/views/organisms/search-bar'. Done.
• Relative. Search for import SearchBar from '../search-bar'
• Relative. Search for import SearchBar from '../../search-bar'
• Relative. Search for… Etc.

Note

You could use some clever Regular expression, but imo absolute paths refactoring still feels safer & faster.

Easier to locate a file

Usually seeing absolute import paths gives you more context.

In the following example you have much more information about SearchBar with the absolute path vs. the relative one:

// ./src/views/molecules/search-box.js

// Absolute
import SearchBar from "src/views/molecules/search-bar";

// Relative
import SearchBar from "./search-bar";

Absolute paths CONs

Not standard

As stated before, none of the solutions out there is standard, only “Local paths” are but they come with their drawbacks, as explained above.

Solutions tend to be very platform-specific:

• React Native solution
• Webpack solution
• Node solution

Maybe project files are not meant to be treated as local packages.

Non-modular

Unfortunately absolute paths break the sense of self-contained module, it’s like you “go outside the module/folder, just to come back in it”.

// ./src/views/home.js

// Absolute
import Box from "src/views/common/box";

1. We already are in ./src/views/
2. We go all the way up to project root ./
3. Only to come back inside ./src/views/common/ folder

With relative paths, we have a sense that ./common/box belongs together with ./src/views/home, they are both Views.

Relative paths PROs

Standard

• No learning curve
• No setup needed
• All standard tools & ecosystem work by default
• Easy on-boarding

Modular thinking

Since nobody wants to open a file and see:

// ./src/modules/chats/views/scenes/chat.js
import Bubble from "../../../../views/atoms/bubble";

Using relative paths forces you to think more in a modular fashion.

In the example above you might want to move the “Chats” views inside the “Chats” module.

// ./src/modules/chats/views/scenes/chat.js
import Bubble from "../atoms/bubble";

Relative paths CON

Well. Hell.