Minified Preact code causing Error by storing event handlers in `l` property on elements causing a name conflict

[paulborm]

Describe the bug Preact stores references to an element's event handlers inside a _listeners property on the element itself — this gets compiled to just l causing a conflict in case a form element with the same name exists inside a form — leading to this error:

Uncaught
TypeError: t is not a function
    at HTMLFormElement.<anonymous>

To Reproduce

• Create a HTMLFormElement containing one or several HTMLInputElement
• Attach a submit handler to the form (the event handler can contain a simple console.log)
• Give each of the input elements a name and make sure to name one l e.g. <input name="l">
• Use a Chromium browser
• Use the compiled and minified version of Preact

Here's a StackBlitz link where you can test it out.

Expected behavior When submitting the form, the event handler should be invoked resulting in a log statement in the browser dev tools.

Actual behavior An error is thrown.

Possible Solution Consider using a Symbol for the property key storing event handlers on elements.

[rschristian]

While I'm not immediately aware of any usages, our mangle.json is an API contract and really shouldn't change outside of a major. While #3709 added _listeners to it, I think this would have been output as .l beforehand anyways, so this was just formalizing it.

Changing it might be breaking.

Consider using a Symbol for the property key storing event handlers on elements.

Preact X supports IE 11 yet, Symbol is a no-go.

[paulborm]

Hi, thank you so much for clarifying. While a Symbol is not an option, maybe it’s still worth to consider an update to the mangle.json in this case — I noticed that all the properties in there are prefixed with __ except the l one. I understand that this would require a major version but currently it conflicts with the DOM (like shown in the example).

[rschristian]

maybe it’s still worth to consider an update to the mangle.json

And we will, but for the meantime, you will probably need to alter your usage is all.

I noticed that all the properties in there are prefixed with __ except the l one. I noticed that all the properties in there are prefixed with __ except the l one.

As mentioned...

While https://github.com/preactjs/preact/pull/3709 added _listeners to it, I think this would have been output as l beforehand anyways, so this was just formalizing it.

_listeners wasn't formally set in our mangle file, but, I believe, consistently being transformed to l. We had to keep it the same, hence, it's the odd one out.

[rschristian]

Just out of curiosity, how do you end up with <input name="l">? Is some tooling auto-generating names?