Class.name always 'e' for every class after uglify / webpack for production

Question

I have an app which is working great in development enviroment but it is not working in production, which is caused by uglify (I think so)

I have a data which user builds and I am saving that either to file or to LocalStorage (json in both cases so doesn't matter).

The structure is built from 3 type of nodes. I have implemented property in the base class ( all inherit from one class): type =this.constructor.name and it is working great in development. When I load the app and read the cache, I go through the JSON and rebuild objects using switch (obj.type) case class1.name... etc. It is working well.

However, when I build for production, when I call class1.name or class2.name or class3.name it all returns e which makes it impossible to restore proper objects...

I do not think it is framework specific issue, but if someone would need to know I build using VueJS with Quasar Framework.

Any ideas?

Answer 1

constructor.name or any other function name property should never be relied in client-side JavaScript, exactly because minification is a must in production environment, and functions with meaningful names become one-letter named functions. e is a common name for a function minified with UglifyJS. This is the reason why uglified JS file has much lesser footprint than unminified file.

If function/class names are used for anything but debugging, they should be explicitly specified as static properties. Since name cannot be redefined in some engines, non-standard displayName (can also be useful for debugging) or any other property name can be used:

class Foo {
  static get id() { return 'Foo' }
  ...
}

Or:

class Foo {
  ...
}
Foo.id = 'Foo';