Nilanth

Posted on Aug 15, 2021 • Edited on Jun 9

No More ../../../ Import in React

#react #javascript #webdev #beginners

Steps to configure absolute Import in Create React App without any third-party packages.

Are you importing components like ../../../../somecomponents? Then you should update to Absolute imports.

Benefits of Absolute Import

You can move your existing code to other components with imports without any changes.
You can easily identify that where the component is actually placed using the import path.
Cleaner Code.
Easier to write.

Configure Absolute Import

To support absolute import create a file named jsconfig.json in your root directory and add the below code.



{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Now let's convert the relative imports in the below component to Absolute Import



import React from 'react';
import Button from '../../components/Button';
import { red } from '../../utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;

The Above imports will be changed to as below



import React from 'react';
import Button from 'components/Button';
import { red } from 'utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;

Now our imports are clean and understandable.

Configuring in JET Brains IDEs

For JET Brains IDEs like WebStorm, PhpStorm, RubyMine and etc, we need to add some additional configurations as below to support Absolute import

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 Click Apply.

VS Code

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

Resources

Conclusion

Absolute imports make the component more readable and clean. I hope you have found this useful. Thank you for reading.

Get more updates on Twitter.

You can support me by buying me a coffee ☕

eBook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

More Blogs

Top comments (50)

Saleh Muhammad • Aug 15 '21

Nice one, But i think this approach is good when you are the only one maintainer of the codebase. For the whole team would suggest using webpack alias.

webpack.js.org/configuration/resol...

Dennis Groß (he/him) • Aug 18 '21 • Edited

I second webpack alias. I also suggest using an expressive prefix for the alias so everyone in the team understands that the import uses an alias.

But Nilanth made a good job explaining why some sort of absolute imports makes your life easier.

Nilanth • Aug 16 '21 • Edited

I think it can be used with n number of maintainer or n number of team also.
As the Package with largest react community also uses this approach.
FYR: github.com/ant-design/ant-design

Nathan Victor • Aug 18 '21

You are correct, and the 5-line setting is tidy and simple. Either way, a team of any size would be using the same settings.

Aymen Marouani • Aug 16 '21

Thanks for the tip, but how can I add this webpack alias when using create-react-app ?

Nilanth • Aug 16 '21

webpack alias not required for CRA. Above config is enough for CRA.

Aymen Marouani • Aug 17 '21

There's also a library called craco that can override configuration for CRA

Nilanth • Aug 16 '21

Bundler will get the config from jsconfig, Not required to tell bundler separately.

Kingkor Roy Tirtho • Aug 15 '21

But What will I do if I've to import from another file that is in the same folder but that folder is nested?
E.g. src/service/backend/post/ is a folder. Inside that I have 2 modules but 1 imports another. So do I've to write it like import {aFunction} from "service/backend/post/module-2" ?

Can I use relative import in that case?

Russell Sanders • Aug 15 '21 • Edited

You can still use relative imports. This compiler option only adds to your abilities to do imports, it doesn't take away. you can still use import {aFunction} from "../module-2" and since it's relative, this will still work. The baseUrl option only applies to imports that are not relative, so relative imports still references from the current file

vrushank • Aug 19 '21

Thanks for sharing, This is really great but It will even greater if we can use alias without ejecting in CRA. Do you have any method to implement alias using CRA?

Also if you have any idea implmenting the same with typescript, please share the same or update the post.

Cheers~

Nilanth • Aug 19 '21

Hey, above method is for CRA only. For typescript use tsconfig.json file instead of jsconfig.json

vrushank • Aug 19 '21

I know this for CRA but do you know how to setup alias?

Pavan Chilukuri • Sep 10 '21

Little lately, after using this config, I found out that when you try to import render function from react testing library, it uses require syntax but not the import syntax. Has anyone experienced this? It is same with all the imports in the test cases.

Renan "Firehawk" Lazarotto • Aug 18 '21

This will definitely come in handy for the React project I'm working on (my portfolio! hopefully I'll have enough time to finish it one day...), and quite frankly, imports are one of my main issues with JavaScript and I sometimes still quite don't get them.

Lars Rye Jeppesen • Aug 18 '21

Or use Typescript and use alias there.... React with JS is suck a mess

vrushank • Aug 19 '21

How do you setup alias using typescript? I'm having hard times setting up alias with typescript, It automatically overrides tsconfig settings when we run the project again and jsconfig won't work with typescript.

Lars Rye Jeppesen • Aug 19 '21

Sorry I don't use jsconfig at all, we use pure TSC (Typescript) compiler and we don't use Babel for our projects.

For pure typescript it's just a configuration in tsconfig.json as you mentioned. I am not sure what's going on with your setup, unfortunately
Cheers

vrushank • Aug 19 '21

I understand, I just want to know that setting how you setup alias using tsconfig in CRA.

Lars Rye Jeppesen • Aug 19 '21

I'm sorry I misunderstood you.
We're not using React so I can't say how it's done there, unfortunately. So sorry

Dave Stewart • Aug 19 '21 • Edited

You may also want to check out Alias HQ:

github.com/davestewart/alias-hq/

It manages aliases, has support for React and various other packages, and even has a CLI to refactor your code.

Shaquille Shaw • Aug 15 '21 • Edited

Great read, I'm sure I will use this soon!
Quick question about the code, is it suppose to instead be :

import Button from '../../components/Button'; import { red } from '../../utils/constants/colors';

I am curious because in doing this it would now allow the utils and the components folder to be both siblings of each other and both children folders of src.