Build error when using `window.Event` and `@Event` in same component

[tricki]

trafficstars

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: Adding a method (annotated with @Method()) which starts with "on" (e.g. onDidDismiss) throws a "build error" with no further details except build failed.

Expected behavior: Successful build or more specific error message.

Steps to reproduce:

1. Add a onDidDismiss method to a component (see Related code below)
2. Run npm run build

Related code:

  @Method()
  async onDidDismiss() {
    return true;
  }

Other information:

• I'm using it to replicate the ion-alert API.
• adding @ts-ignore does not help
• When I build in watch mode (npm start) the error only appears on first build and whenever I change the file but not when I change any other file, and then the code runs correctly.

Workaround:

Instead of npm run build run npm run build --watch. When the error appears save any file (even the one with the error) without making any changes and the build succeeds.

[rwaskiewicz]

👋 Hey there!

I took a stab at reproducing this with the steps provided above, but wasn't able to get it to fail locally. Would it be possible for you to create a minimal reproduction case and push it to GitHub? That way the team would be able to pull down the repo and continue debugging from there.

[tricki]

Hi! Thanks for the quick response.

I've created a repro with a commit for each step below: https://github.com/tricki/stencil-event-build-error

While creating the minimal repro I found that the problem is something different. It appears that the cause of the error is returning an window.Event object in a method when Event is imported from @stencil/core.

In my case I was calling a function in a separate file that returned a Promise<Event> (Event was not imported from Stencil). See this branch: https://github.com/tricki/stencil-event-build-error/tree/with-external-function

Steps to reproduce:

1. Add a @Method (with any name) and return an event object (e.g. return new window.Event('foo');)

Project builds correctly

2. Add any @Event

Build error

[rwaskiewicz]

Thanks! This is super helpful!

I'm gonna mark this to be ingested into our backlog, where we can prioritize this to be done within our normal sprint cycles

[tricki]

Great, thanks. Note that this doesn't have a high priority for me as I used a work-around.

I think there are some similar issues but I could only find this one: https://github.com/ionic-team/stencil/issues/2074

[Setubal18]

Hi @tricki , I'm having this same problem, I'd like to know how you got around this problem.

[tricki]

To anyone who has the same problem: @johnjenkins just mentioned a workaround on the Stencil Discord:

@Event() myEvent: EventEmitter<{value: string, ev: globalThis.Event}>;