![Cover image for [Updated] Simplify the require/import paths in your project and avoid ../../../ circles of hell](https://res.cloudinary.com/practicaldev/image/fetch/s--OBZT-lkM--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/z9e5om0o04e1biay0des.png)
Do you hate seeing ../../../ everywhere in your code? Come along and I'll show you why you should use babel-plugin-module-resolver to work faster a...
For further actions, you may consider blocking this person and/or reporting abuse
For CRA enough to create in root
.envwithNODE_PATH=srcand all directories inside./srcwill be available by absolute path.Do not use
eject, we have alternatives to modify most of internal configs. U can choose:I've updated the post to reflect your suggestion. Thanks
Thanks Pavel, I'll have a look at them.
For typescript, you need this in
tsconfig.json:Great writeup! There is also webpack alias settings, which you can use to achieve a similar thing. That is what we are using, although since our
jesttests don't run webpack, we have to add the alias to jest as well. (we've made our root project directory '@'). I wonder if baking it into babelrc and using same babelrc files would cover the setup in one place.Incidentally with the webpack.alias approach I haven't got autocomplete in VS Code working despite having followed the instructions to get it to work.. (though maybe not close enough)
We got it to work adding aliasFields... might wanna give it a shot.
I wrote about it here
dev.to/costicaaa/vuejs-type-hint-i...
Having done this on past projects in the early days of Webpack, I don't recommend doing it today. It's like sweeping dust under your rug. Yah, it's out of sight but its still in your house.
What exactly is wrong
../../../../../..? It stores state information about your path, but more importantly it lets you know that you're stuff is nested deeply. In my mind, that deep nesting is itself a potential problem - maybe a code smell?w.r.t to renaming, moving, or otherwise managing files, the work of updating and syncing paths should be handled by your IDE instead. Yes, it will cause new commits to be made for files that depend on those now moved files. But why is that bad?
The only case I can see is working on a team - but if you're files are constantly moving directories I think you have other problems. Plus, you'd still have to update the
"alias": { "dir": "./srcDir1" }property in your.babelrcfile anyways.tldr - pointless optimization that adds dependencies, occludes path information, prettifies something that arguably doesn't need prettying up.
That's great. Vuejs has the same problem. I'm in trouble with that. But now I think it can be resolved by babel-plugin-module-resolver.
Thank you so much
If you're using the Vue webpack config, such as with SFC, it provides an alias you can use to reference files by absolute path (e.g. from '@/components/Button'). I've carried this convention into my React projects as it's really easy to setup without adding another dependency. Only downside is that it only works for webpacked files.
Thank you so much. I'm gonna try it
Yeah, I'm sure it's pretty much the same config because vue uses babel to compile as well. If you have a .babelrc file in your project directory, you can put the config in there. Take a look at the github page of the plugin for more info.
Thanks! Really good and straightforward explanation.
Glad you liked it
Useful plugin, thanks!
It certainly has made my life easier.
This can be a very useful plugin. I'm currently dabbling with mobile development, specifically React Native. Can I use it for that? I use VSCode as my IDE. Thanks!
Yes, I was able to get it to work with react-native as well. You need to configure VSCode to work with this plugin and make the auto complete functionality work.
Here's what you gotta do from the plugin's doc:
github.com/tleunen/babel-plugin-mo...