TypeError: Cannot read properties of undefined (reading 'source')

[Justicesoul]

I was trying to play with the examples and everything works fine, except edge labels. When i use <v-edge-lable /> in a template graphs crashes with this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'source')
    at eval (VEdgeLabel.vue?f159:63:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js?d2dd:1726:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:167:1)
    at doWatch (runtime-core.esm-bundler.js?d2dd:1834:1)
    at watchEffect (runtime-core.esm-bundler.js?d2dd:1644:1)
    at setup (VEdgeLabel.vue?f159:62:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7056:1)
eval @ VEdgeLabel.vue?f159:63

here is the code:

<template>
  <div class="h-64">
    <v-network-graph
      :nodes="nodes"
      :edges="edges"
      :layouts="layouts"
      :configs="configs"
    >
      <template #edge-label="{ edge, slotProps }">
        <v-edge-label
          :text="edge.label"
          align="center"
          vertical-align="above"
          v-bind="slotProps"
        />
      </template>
    </v-network-graph>
  </div>
</template>

<script lang="ts">
import { defineConfigs, Edges, Layouts, Nodes } from "v-network-graph";
import { defineComponent } from "vue";

export default defineComponent({
  name: "CompanyStructure",

  data: () => ({
    nodes: {
      node1: { name: "Node 1" },
      node2: { name: "Node 2" },
      node3: { name: "Node 3" },
      node4: { name: "Node 4" },
    } as Nodes,

    edges: {
      edge1: { source: "node1", target: "node2", label: "1 Gbps" },
      edge2: { source: "node2", target: "node3", label: "100 Mbps" },
      edge3: { source: "node2", target: "node4", label: "100 Mbps" },
    } as Edges,

    path: {
      visible: true,
      normal: {
        width: 10,
        dasharray: "10 16",
        animate: true,
        animationSpeed: 40,
      },
    },

    layouts: {
      nodes: {
        node1: { x: 0, y: 0 },
        node2: { x: 80, y: 40 },
        node3: { x: 160, y: 0 },
        node4: { x: 240, y: 80 },
      },
    } as Layouts,

    configs: defineConfigs({
      node: {
        normal: {
          type: "rect",
          width: 90,
          height: 30,
          borderRadius: 6,
          color: "#ffffff",
          strokeWidth: 3,
          strokeColor: "#888888",
        },
        hover: {
          color: "#eeeeee",
        },
      },

      edge: {
        normal: {
          width: 1,
          color: "#666666",
        },
        hover: {
          color: "#666666",
        },
        label: {
          fontFamily: undefined,
          fontSize: 11,
          lineHeight: 1.1,
          color: "#000000",
          margin: 4,
          background: {
            visible: true,
            color: "#ffffff",
            padding: {
              vertical: 1,
              horizontal: 4,
            },
            borderRadius: 2,
          },
        },

        marker: {
          source: {
            type: "none",
            width: 4,
            height: 4,
            margin: -1,
            units: "strokeWidth",
            color: null,
          },
          target: {
            type: "arrow",
            width: 8,
            height: 8,
            margin: -1,
            units: "strokeWidth",
            color: null,
          },
        },
      },
    }),
  }),
});

</script>

[dash14]

Hi @Justicesoul, Sorry for the late reply. Please try to modify the source code as follows.

Before:

      <template #edge-label="{ edge, slotProps }">

After:

      <template #edge-label="{ edge, ...slotProps }">

The error seems to be caused by incorrectly retrieving parameters other than edge passed to the edge-label slot.

Best Regards

[Justicesoul]

Thank you, for the answer!

When i trying to use as it is in the documentation i'v got this errors:

But it seems TypeScript or VSCode configuration not recognising something. Now the library it self working fine.

[dash14]

Hi @Justicesoul, I am pleased to see the improvement. Volar seems to be recommended over Vetur for Vue3 + TypeScript development. If you are concerned about errors, please try this. https://vuejs.org/guide/typescript/overview.html#ide-support

[Justicesoul]

Thank You, very much, @dash14 !