🐛 [BUG]: The error has being was passing the onNodesInitialized event or other event on the VueFlow component
Closed this issue · 8 comments
Is there an existing issue for this?
- 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
I don't get what the problem here actually is?
A type error or what?
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
Although you can use @ts-ignore to skip the check, I don't think that's a good idea
Can you provide a proper reproduction of this issue, please?
You can find a sandbox template here.
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 🥲
Will be fixed in the next patch.
Thanks and I look forward to the next update
Should be fixed with 1.40.0