🕷️ Crawler Inspector

[](https://beqode.com/) [Home](https://beqode.com/) [Blog](https://beqode.com/blog) [\[email protected\]](https://beqode.com/cdn-cgi/l/email-protection) # Absolute vs. Relative import paths (NodeJS) Jun 12, 2019 Everyone’s heard about the infamous “relative path hell” in NodeJS, and while there are a lot of [different](https://stackoverflow.com/questions/10860244/how-to-make-node-js-require-absolute-instead-of-relative) [solutions](https://stackoverflow.com/questions/14381898/local-dependency-in-package-json/26222755) out there, none is standard ([cough](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)) nor [cross platform](https://goenning.net/2017/07/21/how-to-avoid-relative-path-hell-javascript-typescript-projects/) and almost all [feel](https://github.com/ilearnio/module-alias/blob/dev/index.js#L3) [hacky](https://github.com/patrick-steele-idem/app-module-path-node#usage). [NPM local paths](https://docs.npmjs.com/cli/v6/configuring-npm/package-json) 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](https://beqode.com/blog/fixing-import-path-hell-react-native-eslint-vs-code) 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](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)” are but they come with their drawbacks, as explained above. Solutions tend to be very platform-specific: - [React Native solution](https://beqode.com/blog/fixing-import-path-hell-react-native-eslint-vs-code) - [Webpack solution](https://webpack.js.org/configuration/resolve/#resolvealias) - [Node solution](https://stackoverflow.com/questions/10860244/how-to-make-node-js-require-absolute-instead-of-relative) 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. If you enjoyed this article, [give it a clap on Medium](https://medium.com/beqode/absolute-vs-relative-import-paths-nodejs-1e4efa65a7bb). All rights reserved 🤘 2020 © [](https://bulma.io/)

Everyone’s heard about the infamous “relative path hell” in NodeJS, and while there are a lot of [different](https://stackoverflow.com/questions/10860244/how-to-make-node-js-require-absolute-instead-of-relative) [solutions](https://stackoverflow.com/questions/14381898/local-dependency-in-package-json/26222755) out there, none is standard ([cough](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)) nor [cross platform](https://goenning.net/2017/07/21/how-to-avoid-relative-path-hell-javascript-typescript-projects/) and almost all [feel](https://github.com/ilearnio/module-alias/blob/dev/index.js#L3) [hacky](https://github.com/patrick-steele-idem/app-module-path-node#usage). [NPM local paths](https://docs.npmjs.com/cli/v6/configuring-npm/package-json) 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](https://beqode.com/blog/fixing-import-path-hell-react-native-eslint-vs-code) 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”. ### 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](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)” are but they come with their drawbacks, as explained above. Solutions tend to be very platform-specific: - [React Native solution](https://beqode.com/blog/fixing-import-path-hell-react-native-eslint-vs-code) - [Webpack solution](https://webpack.js.org/configuration/resolve/#resolvealias) - [Node solution](https://stackoverflow.com/questions/10860244/how-to-make-node-js-require-absolute-instead-of-relative) 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.