Module alias for Electron APP

You’re here because you get furious when you see all the relative imports right?

import { someExport } from '../../../../../Components/dashboard'

It was annoying for me too. Due to this (and other reasons), I decided to re-structure the entire code base.

100+ files to re-structure, along with creating a alias name to overcome this relative path import problem was a huge task in itself.

Following are the tech stack and their versions:

1. Electron version 7.1
2. Node version 12.16
3. React version 16.12
4. TypeScript version 3.7.2
5. Yarn 1.21
6. Electron-forge/cli: 6.0.0-beta.45

I was using electron forge for all my electron stuff.

first image

To start with aliasing, we need to make some changes in the webpack config.

As you can see in the screenshot above I have two webpack configs. One for the main file and another for the renderer file.

We need to add the following code in the config file.

alias: {
'Screens': path.resolve(__dirname, './src/screens'),
'Components': path.resolve(__dirname, './src/components'),
'Common': path.resolve(__dirname, './src/common'),
'Assets': path.resolve(__dirname, './src/assets'),
'Services': path.resolve(__dirname, './src/services')
},

Your webpack config file should look like this with your alias names.

webpack.config

Now you can import all your modules with alias path name from any of the nested files.

import { someExport } from 'Components/dashboard'

Problem with TypeScript

If you’re using typescript in your app, this will throw an error.

Though you’ve set up your alias name in the webpack file for typescript server it’s still a problem. We have to write some config for typescript to resolve this.

In your tsconfig.json file add the same alias path and this should resolve your TS import problems.

Error: module alias not found

After doing all these, when I tried to start the app, the webpack was unable to resolve the alias name.

It was frustrating, I spend an entire evening looking for the solution. But was out of luck.

It’s on the next day when I carefully checked my webpack.config file, I realized that I was doing the changes on the wrong file.

As you can see in the first image of this post, there are two config files. I was making a change on the “webpack.main.config.js" which was used by the main process. I was supposed to make changes on the "webpack.renderer.config.js" file, since its the renderer processed through which my app runs.

This way I was able to achieve alias name and it solved not just my but all my fellow developer’s problems.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.