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.
- 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:
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 ☕️ 😃
