DEV Community

loading...
Cover image for No More ../../../ Import in React

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

Nilanth
Full Stack Developer | ReactJS | Redux | Laravel | AWS | Follow on Twitter for daily updates | Let’s make the web. Faster 🚀
Updated on ・2 min read

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

  1. You can move your existing code to other components with imports without any changes.
  2. You can easily identify that where the component is actually placed using the import path.
  3. Cleaner Code.
  4. 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"]
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

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.

ide-resource

VS Code

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

Resources

  1. VS Code jsconfig.json
  2. JET Brains CodeStyle

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.

More Blogs

  1. Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
  2. 10 React Packages with 1K UI Components
  3. Redux Toolkit - The Standard Way to Write Redux
  4. 5 Packages to Optimize and Speed Up Your React App During Development
  5. How To Use Axios in an Optimized and Scalable Way With React
  6. 15 Custom Hooks to Make your React Component Lightweight
  7. 10 Ways to Host Your React App For Free
  8. How to Secure JWT in a Single-Page Application

Discussion (52)

Collapse
imsalehmuhammad profile image
Saleh Muhammad

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

Collapse
gdenn profile image
Dennis Groß • 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.

Collapse
nilanth profile image
Nilanth Author • 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

Collapse
natevictor profile image
Nathan Victor

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.

Collapse
aymenmarouani profile image
Aymen Marouani

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

Collapse
nilanth profile image
Nilanth Author

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

Thread Thread
aymenmarouani profile image
Aymen Marouani

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

Collapse
code913 profile image
code913

The code won't work unless you tell your module bundler how. This trick only affects your IDEs intellisense.

Collapse
nilanth profile image
Nilanth Author

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

Collapse
code913 profile image
code913

I use esbuild with custom settings and it doesn't pick up settings from jsconfig. It's a very rare case but you should put a notice stating that you'll need to configure your own bundler to use it if you're not using webpack.

Thread Thread
nilanth profile image
Nilanth Author

I have already mentioned this config is for Create React App (CRA)

Collapse
cl10k profile image
cl10k

But how to convince the bundler (Webpack) to respect the settings in jsconfig?
———
Webpack alias seems a bit stiff and fiddly…

Collapse
vrushank profile image
vrushank

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~

Collapse
nilanth profile image
Nilanth Author

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

Collapse
vrushank profile image
vrushank

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

Collapse
shaquille_shaw profile image
Shaquille Shaw • 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.

Collapse
chilupa profile image
Pavan Chilukuri

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.

Collapse
krtirtho profile image
KR Tirtho

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?

Collapse
enthuin profile image
Russell Sanders • 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

Collapse
spock123 profile image
Lars Rye Jeppesen

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

Collapse
vrushank profile image
vrushank

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.

Collapse
spock123 profile image
Lars Rye Jeppesen

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

Thread Thread
vrushank profile image
vrushank

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

Thread Thread
spock123 profile image
Lars Rye Jeppesen

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

Collapse
davestewart profile image
Dave Stewart • 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.

Collapse
renanlazarotto profile image
Renan Lazarotto

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.

Collapse
nosknut profile image
nosknut

Pretty sure i used this in 2018

Collapse
devtosxn profile image
Tosin Ayodele

Interesting. Thanks for the tip. Looking forward to implementing this in my next project.

Collapse
gene profile image
Gene

I'd use babel-module-resolver for this case. Much neater.

import {Button} from '../../components/Button';
// vs
import {Button} from '@components'
Enter fullscreen mode Exit fullscreen mode
Collapse
jazzbrown1 profile image
Jazz Brown

Ooo neat.. nice post..

Collapse
davidcam profile image
David Camarena

Very nice and concise tip, thank you!

Collapse
mzaini30 profile image
Zen

We can use absolute path in Vite, like this:

import style from '/src/lib/style.css'
Enter fullscreen mode Exit fullscreen mode
Collapse
ngnam profile image
NamNguyen

good tips, i think try it

Collapse
dawnind profile image
Mainak Das

Perfect minimal tutorial/guide. Looking forward to implement this !

Collapse
karthick3018 profile image
KaRthick

Searching this for a while but never thought this would be this much simpler 🎉

Collapse
mostafijurrahman299 profile image
Md.Mostafijur Rahman

Interesting. Thanks for the tip.

Collapse
nicolasdanelon profile image
Nicolas Danelon

I just love it

Collapse
tomeraitz profile image
Tomer Raitz

Very cool! now we need to find a way for "global" import - all imports from one place. I really don't like the imports statements on all the files

Collapse
atharvaahankarahvad profile image
Atharva Shankar Ahvad

t noice

Collapse
leonblade profile image
James Stine

I tried this and had issues with resolving certain node modules in my project.

Collapse
defite profile image
Nikita Makhov

This can occur due to conflicting names. I use aliases like this: @utils, @components. I'm sure there will be case, where I will cross such namespace for module, but still there is no such case.

Collapse
leonblade profile image
James Stine

I believe the issue was with the package react-i18next. This seems a bit too much for the project I'm working on, but it might be cool with starting a new project.

Collapse
jjoselv profile image
Juanjo Lopez

What about test files? Is Jest able to comply?

Collapse
renzo_gaspary profile image
Renzo Gaspary

Sorry if this sounds like a total newb question, but is there not a way to use @ in place of the root level like in vue.js?

Collapse
vicoerv profile image
Vico

what's your JetBrains font?

Collapse
imjituchauhan profile image
Jitu Chauhan

Thank you for sharing this amazing.

Collapse
ilizette profile image
Elizabeth

Thanks for sharing! This really come in handy

Collapse
bluebash profile image
BlueBash Consulting Pvt. Ltd.

Some comments have been hidden by the post's author - find out more