Vue3 - Cannot read property '_c' of undefined

[thespacedeck]

Hi there,

I cannot seem to get vue2vis to work in vue3. I did a simple implementation and seems to crash at:

var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"visualization"})}

Neither _self or $createElement is available.

Could you perhaps assist?

Thanks,
Wzz

[erlebach]

I have tried to create a Vue-3 container for vis-network. I got issues related to strict mode. Some how all vis functions ended up with problems in their argument TS. Here is a snapshot.

[shambu2k]

Here is a codesandbox link which reproduces this issue with graph2d. Note that vue version in the sandbox is 3.2.6.
Please take a look @alexcode

[webmalex]

example for vue 3:

<template>
  <q-inner-loading :showing="loading">
    <q-spinner-ball size="50px" color="primary"/>
  </q-inner-loading>
  <div ref="root"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';
import API from 'src/services/api';

export default defineComponent({
  name: 'vis',
  data(): {
    vis: Network | null,
    loading: boolean
  } {
    return {
      loading: false,
      vis: null,
    };
  },
  async mounted() {
    try {
      this.loading = true;
      var data: any = await API.core.vis(this.$route.query);
    } catch (error) {
      const message = 'Error vis';
      this.$q.notify({ type: 'negative', message: message });
      console.log(message, error, data);
    } finally {
      this.loading = false;
    }
    if (data != undefined) {
      const el : HTMLElement | any = this.$refs.root;
      this.vis = new Network(el, data['graph'], {});
      this.vis.once('afterDrawing', () => {
        el.style.height = '100vh'
      });
    };
  },
  beforeUnmount() {
    this.vis?.destroy();
  }
});
</script>

[webmalex]

minimum for typescript and vue 3:

<template>
  <div ref="root"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';

export default defineComponent({
  name: 'vis',
  data(): {
    vis: Network | null,
  } {
    return {
      vis: null,
    };
  },
  mounted() {
      const el : HTMLElement | any = this.$refs.root;
      this.vis = new Network(el, {nodes: ...}, {});
      this.vis.once('afterDrawing', () => {
        el.style.height = '100vh'
      });
    };
  },
  beforeUnmount() {
    this.vis?.destroy();
  }
});
</script>

[alexcode]

Sorry for the very late reply. @shambu2k you are using the vue2 version of vue2vis. You must migrate to the new package of the repo by modifying the imports to:

import { Graph2d } from "@vue2vis/graph2d";
import "vis-timeline/styles/vis-timeline-graph2d.css";