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

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.

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"]
}

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"]
}

Now we are ready to use absolute imports.

This is now what my code will look like:

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

Comments

[Smitter]

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

[Smitter]

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

[Lars Rye Jeppesen]

For some reason React people always makes everything about React, even though this is a Typescript thing, not a React thing.

[Al - Naucode]

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

[Smitter]

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