Skip to content

Better error message when using a non-function as an event handler #15411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
PatrickG opened this issue Mar 1, 2025 · 4 comments · Fixed by #15460
Closed

Better error message when using a non-function as an event handler #15411

PatrickG opened this issue Mar 1, 2025 · 4 comments · Fixed by #15460
Assignees

Comments

@PatrickG
Copy link
Member

PatrickG commented Mar 1, 2025

Describe the problem

When you accidently use a non-function as an event handler, the error message is not very helpful.

chunk-Q366ZBYL.js?v=5d387fed:2931 Uncaught TypeError: delegated.call is not a function
    at HTMLDivElement.handle_event_propagation

Originating from here.

REPL

Describe the proposed solution

Throw an error with a better error message if delegated is not a function. At least in dev mode.

Importance

nice to have

@adiguba
Copy link
Contributor

adiguba commented Mar 1, 2025

Hello,

I even think that null should not generate an error, but simply "ignore" the handler...

Note that this only concerns local variables, since it is already handled correctly for props and states :

  • null will simply be ignored
  • Invalid values (objects, strings...) don't throw error, but show a warning event_handler_invalid

@adiguba
Copy link
Contributor

adiguba commented Mar 1, 2025

I found another difference for invalid handler in props/states between dev and prod.

  • On dev-mode, it's show the event_handler_invalid warning.
  • On prod-mode, it's throw an error.

=> I think that the error should also be raised on dev mode.

@PatrickG
Copy link
Member Author

PatrickG commented Mar 2, 2025

I came across this error by a user on discord that create a help thread. Their failure was that they did

let handleClick = $props();
// later <button onclick={handleClick}>

instead of

let { handleClick } = $props();

And I found the error message should be clearer than delegated.call is not a function.

@adiguba
Copy link
Contributor

adiguba commented Mar 6, 2025

I made a PR to fix that.

The error is still the same, but on dev mode it will print the event_handler_invalid warning just before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants