Build Fail when using Stencils Event decorator

Question

I have a project using stencils and I want to send form input values to my other application that is written in Angular.
My project is working fine with stencils, but when I try to use the @Event decorator, it imediately fails on build.

Code:

// added Event and EventEmitter
import { Component, Method, Host, h, Prop, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: false,
})

export class MyComponent {
// some @Props
@Event({ eventName: 'a-click' }) onClick: EventEmitter<string>;

@Method()
  async handleClick(): Promise<void> {
    this.onClick.emit('hello world');
}
@Method()
async secondMethod(event: Event): Promise<void> {
  const { id } = (event.target as HTMLInputElement);
  // This handles a checkbox select/unselect
}

render() {...}

It all works fine, until I add the @Event decorator.
It fails without any message. There is only a red selection to the Promise<void> of second method. (but if I remove the event decorator, it all works). Any ideas why?

EDIT
If I remove my second method, using Event. It works.
is this some CONFLICT? How to fix it?

Answer 1

That's a known issue of Stencil (or perhaps TypeScript), but there is a simple workaround (from the docs):

In the case where the Stencil Event type conflicts with the native web Event type, it is suggested that the native web Event type be prefixed with globalThis:

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

More details:

• https://github.com/ionic-team/stencil/issues/4681
• https://github.com/ionic-team/stencil/issues/3037
• https://github.com/ionic-team/stencil/issues/3137