Angular EventEmitter - is not a function ERROR

[mschneiderbauer]

Hello!

Since upgrading to the latest Storybook version (6.5.9), I noticed multiple (console) errors in my stories which I suspect to cause other problems in my Storybook app as well. When a component calls emit() on an EventEmitter, it says that the emitter is not a function. This doesn't occur with every emitter though. Most of them still work and I don't see a pattern. The error listed below occurs in a lot of my stories now and I just can't figure out why. Is this a known issue?

Angular Version: 13.1.3
Storybook Version: 6.5.9

ERROR TypeError ctx.eventEmitter is not a function

ERROR TypeError: ctx.formDataChanged is not a function
    at StorybookWrapperComponent_Template_form_formDataChanged_0_listener (template.html:1:344)
    at executeListenerWithErrorHandling (core.mjs:14974:1)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15012:1)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
    at SafeSubscriber.next (Subscriber.js:122:1)
    at Subscriber._next (Subscriber.js:72:1)
    at Subscriber.next (Subscriber.js:49:1)
    at EventEmitter_.next (Subject.js:39:1)
    at EventEmitter_.emit (core.mjs:22430:1)
    at FormComponent.<anonymous> (our-project.mjs:7382:1)

I also get the following warning:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

I had to upgrade to the newer version because the previous version couldn't identify all of my components @Input()s.

[rothsandro]

Storybook converts props to string, so instead of an event emitter it's now a string "new EventEmitter()" which isn't callable.

See

• Angular: Component Property Value rendered as code (with new renderer) #17001
• Controls: Properties with controls use name of the assigned variable as their value #16865
• Angular 13 component Input is stringified #17004
• storyStoreV7 Angular 12 causes issues with ngOnDestroy and subscriptions #16959

[mschneiderbauer]

Okay thanks, I get it now. Based on the comments I've read, the solution of removing the explicit type definition of the EventEmitters provided by @yngvebn worked for me.

This is the RegEx I used to replace all of my Emitters at once:
: EventEmitter<(.*)> = new EventEmitter<(.*)>\(\);
= new EventEmitter<$1>();