🐛 [BUG]: Component emitted event "x" but it is neither declared in the emits option nor as an "x" prop.

[jrego43]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

A Vue warning is printed to the console for every emitted event that is not defined.

Expected Behavior

No warnings should be printed to the console.

Steps To Reproduce

I believe it is environment/config independent. Simply moving the mouse or clicking within the VueFlow viewport should print a Vue warning.

It can be easily replicated in any live editor that displays warnings:

Relevant log output

No response

Anything else?

May be related to #1585?

[ttsimon]

@bcakmakoglu

Reasons

Possible reasons: Union types such as EdgeMouseEvents cannot obtain the actual event name when the defineEmits macro function is processed in the vue compiler. emits in the vue component object in the end product bundler will not contain the event names defined in the EdgeMouseEvents type

Example

export type EdgeMouseEvents =
  | 'edgeContextMenu'
  | 'edgeMouseEnter'
  | 'edgeMouseMove'
  | 'edgeMouseLeave'
  | 'edgeDoubleClick'
  | 'edgeClick'
  | 'edgeUpdateStart'
  | 'edgeUpdateEnd'

interface FlowEmits {
  (event: 'init', paneEvent: VueFlowStore): void
  (event: EdgeMouseEvents, edgeMouseEvent: EdgeMouseEvent): void
}

// VueFlow.vue
const emit = defineEmits<FlowEmits>()

// VueFlow.mjs
const __default__$1 = {
  name: "VueFlow",
  compatConfig: { MODE: 3 }
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...__default__$1,
props: {},
emits: ['init'],
...
})

[ttsimon]

@bcakmakoglu Do you want to consider merging certain events? Not only avoids the complexity limit of TS, but also solves the problem this time. It's just an idea of mine

[bcakmakoglu]

Do you want to consider merging certain events?

No, that would be a breaking change so it's not an option.

Union types such as EdgeMouseEvents cannot obtain the actual event name when the defineEmits macro function is processed in the vue compiler. emits in the vue component object in the end product bundler will not contain the event names defined in the EdgeMouseEvents type

Looking into the types that are generated the events do all seem to be listed which is why this warning is strange 🤔

Will see what can be done about this.

[bcakmakoglu]

Should be fixed in the next patch.

Seems like isolating the event names as separate union types doesn't work for whatever reason while inlining the union of event names does work without throwing warnings and preserving auto-completion support, even though the type defs output looks more or less the same to me 🤷‍♂️

[bcakmakoglu]

Should be fixed with 1.40.1