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

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!