Preact: eventProxy() TypeError (Preact X)

[qw-in]

Not sure if this is intended or not but while porting over legacy jQuery code to Preact X I ran into this cryptic error message:

preact.mjs?e1dc:1 Uncaught TypeError: this.n[n.type] is not a function
    at HTMLImageElement.k

I found out that it was caused by an old onError prop

<img onError="/* jquery stuff */" />

https://github.com/developit/preact/blob/cd6f005bceb4b34e33063b8f131d97a62bf55993/src/diff/props.js#L100-L102

Could probably do a more explicit type check here but not sure if it is worth the bytes. Happy to add a PR if desired

[marvinhagemeister]

This is a good candidate for our debug addon that lives in preact/debug. They are build to warn in case of bad properties and are only used during development in most setups.

[developit]

Might also be worth considering this suggestion from @uppercod:

https://twitter.com/Uppercod/status/1103336598178013186

Interestingly, it would make the jQuery stuff still work in this case.

[cristianbote]

Honestly, I really like @UpperCod's suggestion. Would make things really straight forward for event handling. Right?

[developit]

It would mean non-function values never get assigned as handlers. TBH the one drawback here is that it would prevent Preact from ever supporting DOM EventHandler interface:

class Foo {
  handleEvent(e) {
    // nicety: `this` is the component
    if (e.type == 'click') this.setState({ clicked: true });
  }
  render() {
    return <button onClick={this} />
  }

One way to work around this would be to check for non-strings instead of checking for functions:

if (name[0]=='o' && name[1]=='n' && typeof value !== 'string') {
  // etc
}

However, all of these solutions get tricky due to the possibility that the type will change:

render(<button onclick="foo()" />, root)   // falls through to .onclick property
render(<button onclick={() => foo()} />, root)  // hooked via addEventListener

In the second render above, .onclick is never unset.

[marvinhagemeister]

Agree, this may lead us down a rabbit hole.