🐛 [BUG]: The error has being was passing the onNodesInitialized event or other event on the VueFlow component

[ttsimon]

Is there an existing issue for this?

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

Current Behavior

An error occurred when I performed the test using vue-tsc, passing the onNodesInitialized event on the VueFlow component, indicating that I was not type-compatible I found that the type definition of the event was missing from the exported vue component type DfineComponent type in @vue-flow/core/dist/container/VueFlow/VueFlow.vue.d.ts

Expected Behavior

No error should be triggered.

Steps To Reproduce

I didn't actually have any code to reproduce, just executed vue-tsc in a project that used VueFlow

Relevant log output

error TS2322: Type '{ ref: Ref<any>; nodes: { id: string; type: string; label: any; position: { x: number; y: number; }; data: { label: any; envntId?: any; type: string; meta: any[]; }; }[]; edges: any[]; "v-slots": { 'node-custom': (node: any) => Element; }; onNodesInitialized: () => { ...; }; }' is not assignable to type 'IntrinsicAttributes & Partial<{ connectionLineStyle: CSSProperties; connectionLineOptions: ConnectionLineOptions; isValidConnection: ValidConnectionFunc; ... 28 more ...; autoPanOnNodeDrag: boolean; }> & Omit<...>'.
  Property 'onNodesInitialized' does not exist on type 'IntrinsicAttributes & Partial<{ connectionLineStyle: CSSProperties; connectionLineOptions: ConnectionLineOptions; isValidConnection: ValidConnectionFunc; ... 28 more ...; autoPanOnNodeDrag: boolean; }> & Omit<...>'.

750             onNodesInitialized={() => {
                ~~~~~~~~~~~~~~~~~~

Anything else?

I cloned the source code to try to fix the problem, and I found the possibility problem: I changed the definition of interface FlowEmits to:

export type FlowEmits = {
  nodesChange: [NodeChange[]]
  edgesChange: [EdgeChange[]]
  nodesInitialized: []
  miniMapNodeClick: [NodeMouseEvent]
  miniMapNodeDoubleClick: [NodeMouseEvent]
  miniMapNodeMouseEnter: [NodeMouseEvent]
  miniMapNodeMouseMove: [NodeMouseEvent]
  connect: [Connection]
  connectStart: [{ event?: MouseEvent } & OnConnectStartParams]
  connectEnd: [MouseEvent]
  clickConnectStart: [{ event?: MouseEvent } & OnConnectStartParams]
  clickConnectEnd: [MouseEvent]
  moveStart: [{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }]
  move: [{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }]
  moveEnd: [{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }]
  selectionDragStart: [NodeDragEvent]
  selectionDrag: [NodeDragEvent]
  selectionDragStop: [NodeDragEvent]
  selectionContextMenu: [{ event: MouseEvent; nodes: GraphNode[] }]
  selectionStart: [MouseEvent]
  selectionEnd: [MouseEvent]
  viewportChangeStart: [ViewportTransform]
  viewportChange: [ViewportTransform]
  viewportChangeEnd: [ViewportTransform]
  /** @deprecated use `viewportChangeEnd` instead */
  paneReady: [VueFlowStore]
  init: [VueFlowStore]
  paneScroll: [WheelEvent | undefined]
  paneClick: [MouseEvent]
  paneContextMenu: [MouseEvent]
  paneMouseEnter: [MouseEvent]
  paneMouseMove: [MouseEvent]
  paneMouseLeave: [MouseEvent]
  updateNodeInternals: []
  error: [VueFlowError]

  // edgeContextMenu: [EdgeMouseEvent]
  // edgeMouseEnter: [EdgeMouseEvent]
  // edgeMouseMove: [EdgeMouseEvent]
  // edgeMouseLeave: [EdgeMouseEvent]
  // edgeDoubleClick: [EdgeMouseEvent]
  // edgeClick: [EdgeMouseEvent]
  // edgeUpdateStart: [EdgeMouseEvent]
  // edgeUpdate: [EdgeUpdateEvent]
  // edgeUpdateEnd: [EdgeMouseEvent]

  // nodeDoubleClick: [NodeMouseEvent]
  nodeClick: [NodeMouseEvent]
  nodeMouseEnter: [NodeMouseEvent]
  nodeMouseMove: [NodeMouseEvent]
  nodeMouseLeave: [NodeMouseEvent]
  nodeContextMenu: [NodeMouseEvent]
  nodeDragStart: [NodeDragEvent]
  nodeDrag: [NodeDragEvent]
  nodeDragStop: [NodeDragEvent]
  //
  /** v-model event definitions */
  'update:modelValue': [FlowElements]
  'update:nodes': [GraphNode[]]
  'update:edges': [GraphEdge[]]
}

Because there are so many properties defined in FlowEmits, there is still no definition for emits, but when I comment out about ten, it works fine

But this is still not enough, I have no other plan, I hope to get your help thank you

[bcakmakoglu]

I don't get what the problem here actually is? A type error or what?

[ttsimon]

The onNodesInitialized event was passed while using the component, but an error occurred during the vue-tsc check

<VueFlow
  onNodesInitialized={() => {
    layoutGraph('LR')
  }}
>
</VueFlow>

This is an exception message

error TS2322: Type '{ ref: Ref<any>; nodes: { id: string; type: string; label: any; position: { x: number; y: number; }; data: { label: any; envntId?: any; type: string; meta: any[]; }; }[]; edges: any[]; "v-slots": { 'node-custom': (node: any) => Element; }; onNodesInitialized: () => { ...; }; }' is not assignable to type 'IntrinsicAttributes & Partial<{ connectionLineStyle: CSSProperties; connectionLineOptions: ConnectionLineOptions; isValidConnection: ValidConnectionFunc; ... 28 more ...; autoPanOnNodeDrag: boolean; }> & Omit<...>'.
  Property 'onNodesInitialized' does not exist on type 'IntrinsicAttributes & Partial<{ connectionLineStyle: CSSProperties; connectionLineOptions: ConnectionLineOptions; isValidConnection: ValidConnectionFunc; ... 28 more ...; autoPanOnNodeDrag: boolean; }> & Omit<...>'.

750             onNodesInitialized={() => {
                ~~~~~~~~~~~~~~~~~~

I think the reason for the problem is that the component's type definition file vueflow.vue.d.ts does not explicitly flag the onNodesInitialized event or other events

I have tried to fix this problem, but there is no good solution, so I need your help

node: 16.20.2 vue: 3.3.11 vue-tsc: 1.8.25 @vue-flow/core: 1.39.3

[ttsimon]

Although you can use @ts-ignore to skip the check, I don't think that's a good idea

[bcakmakoglu]

Can you provide a proper reproduction of this issue, please? You can find a sandbox template here.

[bcakmakoglu]

Ah I can see the problem myself now, thanks for reporting. Will see what I can do about this issue since it's been recurring for some reason 🥲

[bcakmakoglu]

Will be fixed in the next patch.

[ttsimon]

Thanks and I look forward to the next update

[bcakmakoglu]

Should be fixed with 1.40.0