DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Avoid relative path import hell in react
Smitter hane
Smitter hane

Posted on

Avoid relative path import hell in react

React is a front-end Javascript Library for building user interfaces.

You can start building your react Single Page React Application using create-react-app; which is a tool that takes away the hustle of stitching together build tools, and let's you focus on code; the fun stuff.

You need to have Node >= 14.0.0 and npm >= 5.6 installed installed on you computer.
You can create your project by running:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Relative imports

I have created web applications in react using this tool.

For file imports in a folder tree that is not deep, relative import paths are just fine.

In many occasions as my project evolves to become larger, I begin to have more files with increasing folder depth.
Importing modules starts to create relative import path hell.
relative import hell

You can see I have imports like: import { makeBid } from "../../../../../redux/actions/products";.

Well, relative import paths have some downsides:

  • This crazy import paths to a module increases cognitive effort just to trace the exact path to the module. They are hard to follow. Modern IDEs like vscode are smart enough to import a module for you. But paths like ../../../../../ are quite displeasing and do not constitute to clean code.
  • They break during refactoring. Should you move location of a module, things break.

Absolute imports

You can use absolute paths to solve these issues.

You need to configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.

For a JavaScript project, you can create the jsconfig.json file if it doesn't already exist at the root of your project.

Paste in the below code to the file.

{
    "compilerOptions": {
        "baseUrl": "."
    },
    "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

For a Typescript project, most likely you already have a tsconfig.json file. You can configure the baseUrl setting inside the compilerOptions. Just ensure the following lines of code are included:

{
    "compilerOptions": {
        "baseUrl": "."
    },
    "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

Now we are ready to use absolute imports.

This is now what my code will look like:
Absolute import path

You can see how I import using absolute path like: import { makeBid } from "src/redux/actions/products";.

We can now change the location of the module we are importing without fear of breaking anything. We also have an easy time finding path to our module.

I hope this is useful to you. Happy coding✨.

Are you on twitter? Let's connect

Top comments (6)

Collapse
 
lukeshiru profile image
Luke Shiru

TBH, if you have that import path issue, that's more a sign that the directory structure you're using is not great. Aliases will solve the import, but navigating that hellish structure will still be bad. Try simplifying your folder structure first, and then you might not need to use aliases at all.

Collapse
 
smitterhane profile image
Smitter hane Author

I could use react standard structure. But if I ever move location of a module, then I need to change every occurrence of the import path through my whole project

Collapse
 
lukeshiru profile image
Luke Shiru

Not really. If you use a descent editor like VSCode, your imports are updated automatically when you move files. Not to mention that you're just mentioning another issue of having complex directory structures. As I said before, the first step should be to simplify the directory structure. This is not Angular, so we don't need 1000 nesting folders for things to work. Something simple like maybe this...

your-webapp/
β”œβ”€ public/
β”‚  β”œβ”€ favicon.ico
β”‚  β”œβ”€ index.html
β”œβ”€ src/
   β”œβ”€ components/
   β”‚  β”œβ”€ ComponentA/
   β”‚  β”‚  β”œβ”€ ComponentA.jsx
   β”‚  β”‚  β”œβ”€ ComponentA.test.jsx
   β”‚  β”‚  β”œβ”€ ComponentA.module.css
   β”‚  β”œβ”€ ComponentB/
   β”‚     β”œβ”€ ComponentB.jsx
   β”‚     β”œβ”€ ComponentB.test.jsx
   β”‚     β”œβ”€ ComponentB.module.css
   β”œβ”€ utils/
   β”œβ”€ hooks/
   β”œβ”€ App.jsx
Enter fullscreen mode Exit fullscreen mode

... should be more than enough. Anything more complex than that is over engineering. In one of your screenshots I see a pattern that you should avoid, which is component folders inside component folders. You should try to keep a flatter structure, by having all components at the same level like the example above. That will reduce duplication, and will force you to code components that are more reusable and less "domain specific".

Thread Thread
 
smitterhane profile image
Smitter hane Author

Thanks, I will look into how to organize my folder tree

Collapse
 
naubit profile image
Al - Naubit

Thanks, it was a good read, bookmarked, and followed!

Collapse
 
smitterhane profile image
Smitter hane Author

Thanks, i followed you back. I'm glad you found the article useful

What image format should you use in your next project? πŸ€”