🐛 [BUG]: ERROR TS2589 Type instantiation is excessively deep and possibly infinite.

[throrin19]

Is there an existing issue for this?

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

Current Behavior

Hello, I have a problem with vue-flow after upgrade from 1.44.0 to 1.45.0 with typescript.

I reproduce the example made here : https://vueflow.dev/examples/edges/connection-radius.html

But I have this error in my code :

closest.node = closestNode.node; // ERROR TS2589 Type instantiation is excessively deep and possibly infinite.

Expected Behavior

No error TS2589

Steps To Reproduce

1. Create typescript project
2. Get code in the example https://vueflow.dev/examples/edges/connection-radius.html
3. You have error TS2589

Minimal reproduction of the issue with CodeSandbox

No response

Relevant log output

Anything else?

In previous version (1.44.0) there is no TS error for that.

[bcakmakoglu]

What does your code look like exactly?
The example wasn't written in TypeScript so it might be you didn't type things correctly.

This here should work:

<script lang="ts" setup>
import type { ConnectingHandle, EdgeProps, GraphNode, HandleElement } from '@vue-flow/core'
import { connectionExists, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed, reactive, shallowRef, watch } from 'vue'

const props = defineProps<EdgeProps>()

const { getNodes, connectionStartHandle, onConnectEnd, addEdges, edges } = useVueFlow()

const closest = reactive<{
  node: GraphNode | null
  handle: HandleElement | null
  startHandle: ConnectingHandle | null
}>({
  node: null,
  handle: null,
  startHandle: connectionStartHandle.value,
})

const canSnap = shallowRef(false)

const HIGHLIGHT_COLOR = '#f59e0b'

const SNAP_HIGHLIGHT_COLOR = '#10b981'

const MIN_DISTANCE = 75

const SNAP_DISTANCE = 30

watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
  const closestNode = getNodes.value.reduce(
    (res, n) => {
      if (n.id !== connectionStartHandle.value?.nodeId) {
        const dx = props.targetX - (n.computedPosition.x + n.dimensions.width / 2)
        const dy = props.targetY - (n.computedPosition.y + n.dimensions.height / 2)
        const d = Math.sqrt(dx * dx + dy * dy)

        if (d < res.distance && d < MIN_DISTANCE) {
          res.distance = d
          res.node = n
        }
      }

      return res
    },
    {
      distance: Number.MAX_VALUE,
      node: null,
    } as { distance: number; node: GraphNode | null },
  )

  if (!closestNode.node) {
    return
  }

  canSnap.value = closestNode.distance < SNAP_DISTANCE

  const type = connectionStartHandle.value?.type === 'source' ? 'target' : 'source'

  const closestHandle = closestNode.node.handleBounds[type]?.reduce((prev, curr) => {
    const prevDistance = Math.sqrt((prev.x - props.targetX) ** 2 + (prev.y - props.targetY) ** 2)
    const currDistance = Math.sqrt((curr.x - props.targetX) ** 2 + (curr.y - props.targetY) ** 2)

    return prevDistance < currDistance ? prev : curr
  })

  if (
    connectionStartHandle.value &&
    connectionExists(
      {
        source: connectionStartHandle.value.nodeId,
        sourceHandle: connectionStartHandle.value.id,
        target: closestNode.node.id,
        targetHandle: closestHandle?.id,
      },
      edges.value,
    )
  ) {
    return
  }

  if (closestHandle) {
    const el = document.querySelector(`[data-nodeid='${closestNode.node.id}']`) as HTMLDivElement

    const prevStyle = el.style.backgroundColor
    el.style.backgroundColor = canSnap.value ? SNAP_HIGHLIGHT_COLOR : HIGHLIGHT_COLOR
    closest.node = closestNode.node
    closest.handle = closestHandle

    onCleanup(() => {
      el.style.backgroundColor = prevStyle
      closest.node = null
      closest.handle = null
    })
  }
})

const path = computed(() => getBezierPath(props))

onConnectEnd(() => {
  if (closest.startHandle && closest.handle && closest.node) {
    if (canSnap.value) {
      addEdges([
        {
          sourceHandle: closest.startHandle.id,
          source: closest.startHandle.nodeId,
          target: closest.node.id,
          targetHandle: closest.handle.id,
        },
      ])
    }
  }
})

const strokeColor = computed(() => {
  if (canSnap.value) {
    return SNAP_HIGHLIGHT_COLOR
  }

  if (closest.node) {
    return HIGHLIGHT_COLOR
  }

  return '#222'
})
</script>

<template>
  <g>
    <path :d="path[0]" class="vue-flow__connection-path" />
    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :stroke="strokeColor" :r="3" :stroke-width="1.5" />
  </g>
</template>

[throrin19]

I have same code but already the error on closest.node = closestNode.node; :

<template>
    <g>
        <path
            :d="path[0]"
            class="vue-flow__connection-path" />
        <circle
            :cx="targetX"
            :cy="targetY"
            :r="4"
            :stroke="strokeColor"
            :stroke-width="1.5"
            fill="#fff" />
    </g>
</template>

<script setup lang="ts">
import type { ConnectingHandle, EdgeProps, GraphNode, HandleElement } from '@vue-flow/core';
import { connectionExists, getBezierPath, useVueFlow } from '@vue-flow/core';
import { computed, reactive, ref, watch } from 'vue';

const props = defineProps<Pick<EdgeProps, 'sourcePosition' | 'sourceX' | 'sourceY' | 'targetPosition' | 'targetX' | 'targetY'>>();

const {
    addEdges,
    connectionStartHandle,
    edges,
    getNodes,
    onConnectEnd,
} = useVueFlow();

/**
 * Toute cette partie est pour rendre magnétique la cible d'un lien
 * Trouvé dans les exemples : https://vueflow.dev/examples/edges/connection-radius.html
 */

const closest = reactive<{
    handle: HandleElement | null;
    node: GraphNode | null;
    startHandle: ConnectingHandle | null;
}>({
    handle: null as HandleElement | null,
    node: null as GraphNode | null,
    startHandle: connectionStartHandle.value,
});

const canSnap = ref(false);
const HIGHLIGHT_COLOR = '#f59e0b';
const SNAP_HIGHLIGHT_COLOR = '#10b981';
const MIN_DISTANCE = 75;
const SNAP_DISTANCE = 30;

watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
    if (!connectionStartHandle.value) {
        return;
    }

    const closestNode = getNodes.value.reduce(
        (res, n) => {
            if (n.id !== connectionStartHandle.value?.nodeId) {
                const dx = props.targetX - (n.computedPosition.x + n.dimensions.width / 2);
                const dy = props.targetY - (n.computedPosition.y + n.dimensions.height / 2);
                const d = Math.sqrt(dx * dx + dy * dy);

                if (d < res.distance && d < MIN_DISTANCE) {
                    res.distance = d;
                    res.node = n;
                }
            }

            return res;
        },
        {
            distance: Number.MAX_VALUE,
            node: null as GraphNode | null,
        } as { distance: number; node: GraphNode | null },
    );

    if (!closestNode.node) {
        return;
    }

    canSnap.value = closestNode.distance < SNAP_DISTANCE;

    const type = connectionStartHandle.value.type === 'source' ? 'target' : 'source';

    const closestHandle = closestNode.node.handleBounds[type]?.reduce((prev, curr) => {
        const prevDistance = Math.sqrt((prev.x - props.targetX) ** 2 + (prev.y - props.targetY) ** 2);
        const currDistance = Math.sqrt((curr.x - props.targetX) ** 2 + (curr.y - props.targetY) ** 2);

        return prevDistance < currDistance ? prev : curr;
    }, { x: 0, y: 0 } as HandleElement);

    if (!closestHandle) {
        return;
    }

    if (
        connectionExists(
            {
                source: connectionStartHandle.value.nodeId,
                sourceHandle: connectionStartHandle.value.id,
                target: closestNode.node.id,
                targetHandle: closestHandle.id,
            },
            edges.value,
        )
    ) {
        return;
    }

    if (closestHandle) {
        const el = document.querySelector<HTMLElement>(`[data-nodeid='${closestNode.node.id}']`);

        const prevStyle = el?.style?.backgroundColor;
        // eslint-disable-next-line ts/no-non-null-assertion
        el!.style!.backgroundColor = canSnap.value ? SNAP_HIGHLIGHT_COLOR : HIGHLIGHT_COLOR;
        closest.node = closestNode.node;
        closest.handle = closestHandle;

        onCleanup(() => {
            // eslint-disable-next-line ts/no-non-null-assertion
            el!.style!.backgroundColor = prevStyle as string;
            closest.node = null;
            closest.handle = null;
        });
    }
});

const path = computed(() => getBezierPath(props));

onConnectEnd(() => {
    if (closest.startHandle && closest.handle && closest.node) {
        if (canSnap.value) {
            addEdges([
                {
                    source: closest.startHandle.nodeId,
                    sourceHandle: closest.startHandle.id,
                    target: closest.node.id,
                    targetHandle: closest.handle.id,
                },
            ]);
        }
    }
});

const strokeColor = computed(() => {
    if (canSnap.value) {
        return SNAP_HIGHLIGHT_COLOR;
    }

    if (closest.node) {
        return HIGHLIGHT_COLOR;
    }

    return '#222';
});
</script>

[bcakmakoglu]

What's your TypeScript version you're using?
What version of vue-tsc are you using?

[throrin19]

I'm on typescript 5.8.3 and vue-tsc 2.2.10.

But as I said, it works fine with vue-flow 1.44.0. The error appears in version 1.45.0

[bcakmakoglu]

I understood that but I cannot reproduce this issue myself atm, hence I need to know what your environment looks like exactly and see how, and if, it can be reproduced.

[throrin19]

I understand.

This is my tsconfig :

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["vite.config.ts", "src/**/*.story.vue"],
  "compilerOptions": {
    "composite": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2022",
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": "./",
    "paths": {
      "@module/alerts": ["src/modules/alerts/index.ts"],
      "@module/companies": ["src/modules/companies/index.ts"],
      "@module/customers": ["src/modules/customers/index.ts"],
      "@module/dashboards": ["src/modules/dashboards/index.ts"],
      "@module/devices": ["src/modules/devices/index.ts"],
      "@module/events": ["src/modules/events/index.ts"],
      "@module/connectors": ["src/modules/connectors/index.ts"],
      "@module/graphcompute": ["src/modules/graphcompute/index.ts"],
      "@module/factories": ["src/modules/factories/index.ts"],
      "@module/homes": ["src/modules/homes/index.ts"],
      "@module/hpcMeasures": ["src/modules/hpcMeasures/index.ts"],
      "@module/importCsv": ["src/modules/importCsv/index.ts"],
      "@module/infrastructure": ["src/modules/infrastructure/index.ts"],
      "@module/login": ["src/modules/login/index.ts"],
      "@module/modelcompute": ["src/modules/modelcompute/index.ts"],
      "@module/notifications": ["src/modules/notifications/index.ts"],
      "@module/profile": ["src/modules/profile/index.ts"],
      "@module/users": ["src/modules/users/index.ts"],
      "@module/forms": ["src/modules/forms/index.ts"],
      "@module/explore": ["src/modules/explore/index.ts"],
      "@/assets/*": ["./src/assets/*"],
      "@/components/*": ["./src/components/*"],
      "@/langs/*": ["./src/langs/*"],
      "@/libs/*": ["./src/libs/*"],
      "@/pages/*": ["./src/pages/*"],
      "@/plugins/*": ["./src/plugins/*"],
      "@/router/*": ["./src/router/*"],
      "@/stores/*": ["./src/stores/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/types/*": ["./src/types/*"],
      "@/use/*": ["./src/use/*"],
      "@/mc/*": ["./src/mc/*"],
      "@/configs": ["./src/configs.ts"],
      "@/modules": ["./src/modules.ts"],
      "@/router": ["./src/router.ts"]
    },
    "types": [
      "node",
      "vuetify"
    ],
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ]
  }
}

[bcakmakoglu]

Thanks, that helps reproducing the issue :)
I'll see if I can add a patch to fix this with the next release - for now, as a workaround, you should be able to just do this closest.node = closestNode.node as any
It's just a temporary workaround though until I published an actual fix for it.

[throrin19]

Thanks. For now I'm not blocked. renovate don't finish update in my project since types are correct. I can wait the fix 😄

[Hekikai]

Have the same problem after upgrade to 1.45.0

[Hekikai]

Any updates here? 🙏🏻

[bcakmakoglu]

Not yet, no :/
TBH it looks like a deeper reaching issue that won’t be easily ironed out without any breaking changes so atm I can only tell you to typecast this if necessary 😩

[Hekikai]

Thank you for the answer! Looking forward to solution 🙏🏻