question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

eventProxy() TypeError (Preact X)

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
developitcommented, Mar 7, 2019

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.

1reaction
developitcommented, Mar 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

eventProxy() TypeError (Preact X) · Issue #1350 - GitHub
This is a good candidate for our debug addon that lives in preact/debug . They are build to warn in case of bad...
Read more >
What's new in Preact X
New features and changes in Preact X. ... The createContext -API is a true successor for getChildContext() . Whereas getChildContext is fine when...
Read more >
Switching to Preact (from React)
This is the recommended way to try out Preact if you have an existing React app. This lets you continue writing React/ReactDOM code...
Read more >
Hooks | Preact: Fast 3kb React alternative with the same ES6 ...
They both use the useCounter() custom hook, but each has its own instance of that hook's associated state. Thinking this looks a little...
Read more >
Refs | Preact: Fast 3kb React alternative with the same ES6 ...
current // an HTML <input> element input.current.focus() // focus the input! Using createRef() ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found