Unhandled error during execution of native event handler

[adamreisnz]

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Create an @click handler
2. Generate an error in the actual handler
3. Observe that Vue issues a warning "Unhandled error during execution of native event handler"

What is expected?

For the actual error to be surfaced/logged/exposed to make debugging easier

What is actually happening?

The warning doesn't contain any meaningful information and makes debugging challenging.

---

I can't seem to reproduce this in the SFC playground, as I see the actual error surfacing there (e.g. Cannot read properties of undefined (reading 'defaultPrevented')), but when I do something similar in my app Vue keeps reporting the warning "Unhandled error during execution of native event handler" and the actual error is not shown or logged.

[LinusBorg]

You must have a problem with your project setup, as this is what I see:

...and you see a stack trace in the playground as well.

Feel free to open a new issue here (or maybe in the Vue CLI repo, depending on your setup?) when you have a runnable reproduction repository.

Or ask for help in the community at chat.vuejs.org

[adamreisnz]

My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with event.preventDefault()

Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.

[BrunoRicci]

My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with event.preventDefault()

Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.

I'm facing the same issue and cannot seem to solve it. I get the same error over and over.

my html element has this attribute: @click="componentClicked"
and the method is in the "methods" object at the "script" section of the vue SFC.

componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }

The componentClicked method works fine, and the "event" value is properly printed in the console. Apparently that component's line this.$emit('line-click'); is the problem, this is the actual error I get, plus the warning you also had.

[BrunoRicci]

My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with event.preventDefault()
Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.

I'm facing the same issue and cannot seem to solve it. I get the same error over and over.

my html element has this attribute: @click="componentClicked" and the method is in the "methods" object at the "script" section of the vue SFC.

componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }

The componentClicked method works fine, and the "event" value is properly printed in the console. Apparently that component's line this.$emit('line-click'); is the problem, this is the actual error I get, plus the warning you also had.

Well, I finally found my mistake; I was calling "this" from an arrow function and not from the function itself... thus, "this" wasn't accessible. I came up with this kind of error once and spent hours dealing with it, but this time I recalled about it and instantly realized.

I hope it will be useful for anyone who is perhaps facing the same issue.

[zhuhanyuguluguluzhu]

哈哈哈哈