Hello world with webpack and "production" mode raises CustomElementRegistry.define not a valid name

[betatim]

Hi 👋 !

I was wondering if someone had setup a "hello world" project that uses catalyst and webpack?

After reading the blog post I was trying to follow the guide to create a "Hello world" component. It works if I set mode: "development" in my webpack.config.js but I get the following error in my browsers JS console Uncaught DOMException: CustomElementRegistry.define: 'w' is not a valid custom element name when I set the mode to production. From reading the generated index.js there is code like the following towards the end:

// ... lots of code for the clipboard element
let w = class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'Hello World!',
    console.log('hellllooooooooo 👋')
  }
};
w = function (t, e, o, n) {
// ... mode code here

Not sure why but it seems like the name of the variable that the class is assigned to w is used when generating the custom element name. A clue towards what is going wrong?

The code is in https://github.com/betatim/try-catalyst, the output in dist/index.js was created with mode set to production. I used the following steps to create it:

$ nvm use v12
$ yarn
$ npx webpack
$ python3 -m http.server --directory dist
# open http://localhost:8000 and check the console for the error message

As you can tell from the last command, I use Python a lot and super new to JS/typescript and all that. Maybe there is some basic misconfiguration in my webpack or TS config? I'm not particularly attached to using webpack, I picked it because I've used it before. It seems weird that it works in development mode but not production :-/

What I would like to be able to do is use catalyst, create my own components, build a index.js and load that from HTML that I somehow generate (maybe via plain old jinja2 templates in a tornado webserver).

Any and all pointers would be welcome!

[koddsson]

Not sure why but it seems like the name of the variable that the class is assigned to w is used when generating the custom element name. A clue towards what is going wrong?

Webpack is mangling the class name during minification. Since catalyst will get the class name at runtime and register a custom element from that name, you need to make sure that class names aren't changed during modification.

I'm not sure how this is done in webpack. The minified that I'm most familiar with: terser has an option to keep class names unmangled.

[betatim]

This was super helpful. Turns out webpack's (v5) default minimiser is terser. Adding the following to my webpack.config.js sorted things out:

...
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,
        }
      })
    ]
  },
...

Commit in the repo linked from above with the fix https://github.com/betatim/try-catalyst/tree/36fdd7ebbef66cd0aa2e4c4d00262caf6ff63779

Thanks a lot!