[Updated] Simplify the require/import paths in your project and avoid ../../../ circles of hell

Mohammadjavad Raadi on March 29, 2019

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... [Read Full]
markdown guide
 
  1. For CRA enough to create in root .env with NODE_PATH=src and all directories inside ./src will be available by absolute path.

  2. Do not use eject, we have alternatives to modify most of internal configs. U can choose:

  • customize-cra
  • react-app-rewired
 

I've updated the post to reflect your suggestion. Thanks

 
 

For typescript, you need this in tsconfig.json:

"paths": {
      "src/*": ["src/*"],
      "components/*": ["src/components/*"],
      "hooks/*": ["src/hooks/*"],
      "hocs/*": ["src/hocs/*"],
      "fragments/*": ["src/fragments/*"],
      "utils/*": ["src/utils/*"],
      "markdown/*": ["src/markdown/*"]
    }
 

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 jest tests 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)

 
 

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

 
 

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.

 

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

 
 
code of conduct - report abuse