Not working with webpack minimization

[fwdillema]

Hi,

I made an electron app using electron-forge and its builtin typescript/webpack template, using:

yarn create electron-app my-new-app --template=typescript-webpack

In such a setup, webpack minimizes the javascript code in production mode (but not in development mode). The minimization removes the constructor.name from classes which is used by electron-affinity to retrieve the className of the rpc API (most notably in exposeAPI()). This makes the application fail in production mode as the RPC api is not found by the renderer process (as it is registered with an empty name).

I am not sure whether this can/should be fixed by electron-affinity, but it is good to add this to the documentation to spare other users the time to figure this one out.

I have solved this problem for now by switching off minimization in the webpack configuration file webpack.main.config.js:

optimization: {
minimize: false
},

but that is more a workaround than a proper solution.

[jtlapp]

Thank you for reporting this and for the in-depth investigation.

I may have a way to code a workaround within the library so you can still use webpack minimization. I'll look into it this evening.

[jtlapp]

Well, the solution I had it mind won't work. I was going to stash away the class name from within a constructor, but this wepback issue makes it clear that won't work.

The only other option I have is to require you to pass the class name to the 'expose' API. I can try that, but I'm not yet sure I can get TS to require that the name you provide is that of the provided class.

Minification also changes method names, so even if we were to get this working, things would break further down the line.

However, I did find this SO answer explaining a possible solution. The answer shows you how to prevent method names from being minimized, but the plugin also appears to have a switch for preventing class names from being minimized.

In any case, I do need to add something about minification to the docs. If you want to try the suggested plugin, please do let me know if it fixes things.

[fwdillema]

Yes, I had found the same SO answer and tried fiddling with the minimizer options. I used the keep_classnames and set it to a regexp with just the name of the API class. That solved the API expose/binding issue with affinity for me. Unfortunately, setting this minimizer option like that made another library in my app fail. This is really odd because that library does not fail with minimisation off and it does not fail with minimisation on with default options. I guess, setting this one minimizer option changes something else in the default behaviour. I will not dig into this now as I can live with minimisation off (for now). If I find out what is the problem when I have more time to dig into this, I will let you know.

PS: thanks for your quick responses and beautiful module!

[IevgeniiZolotko-Pango]

Thank you for this library!

In case if it helps anyone, here is a webpack config to conditionally preserve names for all of the classes which end with IpcApi:

const preserveClassNamePattern = /.*IpcApi$/;

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  
  return {
    optimization: {
      minimize: isProd,
      minimizer: isProd ? [
        new TerserPlugin({
          terserOptions: {
            keep_classnames: preserveClassNamePattern,
            keep_fnames: preserveClassNamePattern,
            mangle: {
              keep_classnames: preserveClassNamePattern,
              keep_fnames: preserveClassNamePattern
            },
            compress: {
              keep_classnames: preserveClassNamePattern,
              keep_fnames: preserveClassNamePattern
            }
          }
        })
      ] : [],
    },

This way all of the classes but the IPC-related will get renamed.

[jtlapp]

Wow! Thanks so much!