Geek Culture
Published in

Geek Culture

Making Life Easier with Absolute Imports - React in Javascript and Typescript

We are used to import files like this ../../../Components/Dashboard/Profile and this has been pretty standard for a long. But managing all this ../ is a pretty tough job. Say I want to change the location of a file or folder. Wait. Should I do that? Won’t it break anything? These questions suddenly strike us.
Here come Absolute Imports to the rescue, We can now import files in this formComponents/Dashboard/Profile without hassling with ../ and we don’t care about the relative positions of the two files. What we care only is the position of the file relative to the root of the project. This simplifies the job of importing a lot. Let’s see how exactly we can do this.

Absolute Import

Absolute Import has been launched in create react app v3 . Let’s go over a few benefits of absolute import if you are still not convinced else skip this part.

Benefits

  • No need to hassle with ../../../ . Care about your code only 😃 (That’s a task gone)
  • You can directly copy/paste code from a component and use it anywhere else without making any changes to the imports.
  • You can easily locate a file or component imported due to absolute positioning.
  • Makes the code cleaner.
  • Makes code writing easier.

That list is more than enough to adapt absolute import 😛

Get Started

According to create-react-app Docs, We can use absolute imports in our react project by configuring a jsconfig.json / tsconfig.json (for typescript projects) file in the root of our project. If you're using TypeScript in your project, you will already have a tsconfig.json file.

If working in JS, add a jsconfig.json file in the root of your project with the following content:

If you’re using TypeScript, you will already have a tsconfig.json file in the root of your project. You can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file to start working with absolute imports. The file content would look like this:

In the above file, I have just added a baseUrl setting with value src in my compilerOptions Nothing else has been changed from the original tsconfig.json generated.

Converting Relative Imports into Absolute Imports

We have configured our project to use absolute imports, now let's use it.

This is a file without absolute imports

We just need to drop ../../../ from the imports. Now the file looks like

🔥 And it’s done. We have successfully configured and used absolute imports in our React App.

Now that we’ve configured our project to support absolute imports, we can import a module located at src/components/Button.js, like so:

import Button from 'components/Button';

The create-react-app docs end here. But there is something else to do.

We have configured our React App to use absolute import. But we need to also configure our code editor for the same.

Configuring in WebStorm

WebStorm assumes absolute paths are in node_modules (as per the Node.js rules), so we must tell it that we’re being fancy and using absolute imports.

Right-click the src folder and select Mark Directory as and Click Resource Root.

Mark src directory as Resources Root
  • Next select Preferences -> Editor -> Code Style -> JavaScript -> Imports and Check Use paths relative to the project, resource or source roots and then Click Apply.

VS Code

No Changes need to be done in VS Code. It will automatically import the config from jsconfig.json / tsconfig.json file.

ESLint

CRA has a very minimal set of rules in their ESLint setup and some strong opinions about why this is the case. We generally use something like Airbnb’s ESLint config for ESLint Setup.

If you do, you will soon learn that Airbnb uses eslint-plugin-import, which checks for undefined imports, and will give you errors like so:

You can fix this with a settings prop in your ESLint config to tell it that your paths might be relative to src:

EsLint Config

Note that you don’t need to install any npm package for this, that settings chunk is enough.

For Typescript, you should use the extensions setting as above to resolve imports in Ts.

Is It Really Worth It

Absolute imports make the component more readable and clean. There are cases like very closely related components where relative imports makes more sense and absolute import may be an overkill. But overall the pros that absolute imports offers outmatch the cons. And Thus moving to absolute imports can be a step worth it.

Conclusion

I hope you have found this useful. Thank you for reading.

If you found this blog useful, You can Buy Me a Coffee ☕️ 😃

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

How we Build a Component Library

Setup a React App From Scratch

JavaScript — Return Object From Array

Let’s Clean Up: Ugly Try-Catches in JavaScript!

Getting Started with React Native and Redux

The Basics of Using JSX in React.js

Best Practices For Inline Style In React.Js

[Action required] Your RSS.app Trial has Expired — Thu Nov 25 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aman Kumar

Aman Kumar

Building influencerbit.com, 📍Bengaluru

More from Medium

How and when to use useImperativeHandle and forwardRef

Modern Test-Driven Development with TypeScript and Redux Slices

A more granular useEffect

React v18: What You Need to Know