Steps to configure absolute Import in Create React App without any third-party packages.
Are you importing components like ../../../../somecompone...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.
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 fileThanks 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?
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.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.
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
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.
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.
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.
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
Interesting. Thanks for the tip.
Ooo neat.. nice post..
Very nice and concise tip, thank you!
Perfect minimal tutorial/guide. Looking forward to implement this !
Searching this for a while but never thought this would be this much simpler 🎉
I have already mentioned this config is for Create React App (CRA)
I just love it
what's your JetBrains font?
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
I tried this and had issues with resolving certain node modules in my project.
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.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.Thank you for sharing this amazing.
Thanks for sharing! This really come in handy
t noice
But how to convince the bundler (Webpack) to respect the settings in jsconfig?
———
Webpack alias seems a bit stiff and fiddly…
What about test files? Is Jest able to comply?
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?
twitter.com/BlueBashCo/status/1427...
which theme of your ide
Custom
Interesting️🔥️🔥