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.
eBook
Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples
ReactJS Optimization Techniques and Development Resources
More Blogs
- Laravel Sanctum Authentication for React App Using Breeze
- Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
- Don't Optimize Your React App, Use Preact Instead
- Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
- 10 React Packages with 1K UI Components
- Redux Toolkit - The Standard Way to Write Redux
- 5 Packages to Optimize and Speed Up Your React App During Development
- How To Use Axios in an Optimized and Scalable Way With React
- 15 Custom Hooks to Make your React Component Lightweight
- 10 Ways to Host Your React App For Free
- How to Secure JWT in a Single-Page Application
Top comments (50)
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...
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.
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
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.
Thanks for the tip, but how can I add this webpack alias when using create-react-app ?
webpack alias not required for CRA. Above config is enough for CRA.
There's also a library called craco that can override configuration for CRA
Bundler will get the config from jsconfig, Not required to tell bundler separately.
Little lately, after using this config, I found out that when you try to import
renderfunction from react testing library, it usesrequiresyntax but not theimportsyntax. Has anyone experienced this? It is same with all the imports in the test cases.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~
Hey, above method is for CRA only. For typescript use tsconfig.json file instead of jsconfig.json
I know this for CRA but do you know how to setup alias?
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.
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 likeimport {aFunction} from "service/backend/post/module-2"?Can I use relative import in that case?
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 fileYou 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.
Pretty sure i used this in 2018
Over engineering in my opinion. I don't feel much is gained and that more complexity is added for visual preference only. I can move a file and VSCode will update the relative imports for me. I can't move many files simultaneously, but can move files fairly quickly one at a time.
Or use Typescript and use alias there.... React with JS is suck a mess
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.
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
I understand, I just want to know that setting how you setup alias using tsconfig in CRA.
I'm sorry I misunderstood you.
We're not using React so I can't say how it's done there, unfortunately. So sorry
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.
Interesting. Thanks for the tip. Looking forward to implementing this in my next project.
I'd use babel-module-resolver for this case. Much neater.
We can use absolute path in Vite, like this:
good tips, i think try it
Some comments have been hidden by the post's author - find out more