Creating path aliases in create-react-app with react-app-rewired
Imagine having lots and lots of files in your project structure (as it usually happens in any corporate applications).
And imagine having to import so many modules (components for react Devs 😉) in your application.
Your start of the file starts to look something like this.
Isn’t it a bit difficult on eyes to see this?
Don’t you feel this should be more refined?
And to top it all, WHAT IF I moved one of the files? I’d have to change the import paths for all of my impacted files.
Even though VSCode offers to rename all the path files imports, but imagine the git changes it’ll counter.
There has to be a better way to manage path files imports
There should be a way where I can import all the files with a common alias and need not worry where it has been defined, and if it is ever moved from there, my part of code shouldn’t be affected. The answer you are looking for-aliases. Thank you 😁.
Aliases are some common paths prefixes that custom defines the source of the file.
Files imported through aliases look something like this.
It looks so clean. All my actions are defined in @app-actions, all my constants in @constants, and so on.
There are many utilities like webpack that allow us to define these paths in their config.
But many small react applications don’t need a webpack config, and many don’t have one, like those created with ‘create-react-app.’ How to define aliases there?
Fortunately, there is a way. It is through tweaking the create-react-app webpack config(s) without using ‘eject’ and without creating a fork of the react-scripts. All the benefits of create-react-app without the limitations of “no config.” You can add plugins, loaders whatever you need.
- Install react-app-rewired
2. Create a config-overrides.js file in the root directory.
3. ‘Flip’ the existing calls to react-scripts in npm scripts for a start, build and test.
4. Now that we have rewired our react app, it is time for declaring aliases. Head over to the config-overrides.js file and import ‘addWebpackAlias’ from ‘customize-cra.’ Also, import the ‘path’ module.
5. Add a new key ‘addWebpackAlias’ to the override payload of the exports. It might already have a few configs defined by default. Add an object with key-value pairs where the key would be your path definition, and the value would be a path resolving function. Something like this
6. And you are good to go.
Your code looks super clean without those hunting ‘../../../’ prefixes. Just import the standard files, and don’t worry if they are moved within the project. Just update their path resolution in config-overrides.js, and you are good to go. During the build stage, the react-app-rewired will interpret these aliases and pick the file from those paths.
I hope this solution fixes the issue for all. If you come across a better and cleaner approach, the writer is all ears.
Feel free to add in your comments and feedback.
Stay safe
