Multiple errors using VueCytoscape

[OctaneInteractive]

Hi!

I'm attempting to migrate from the regular version of Cytoscape to VueCytoscape 1.0.6, but I'm having a few problems.

In "main.js" I have:

import VueCytoscape from 'vue-cytoscape'
Vue.use(VueCytoscape)

I've had that code in the target component itself, but the errors are the same regardless, and here is an abridged version of those errors:

[Vue warn]: $attrs is readonly.

found in

--->
at src/components/Perspective.vue
at src/App.vue

[Vue warn]: $listeners is readonly.

found in

--->
at src/components/Perspective.vue
at src/App.vue

[Vue warn]: Injection "cy" not found

Error in data(): "TypeError: Cannot read property 'then' of undefined"

(found in )

TypeError: Cannot read property 'then' of undefined

The code is:

<template>
  <div>
    <cytoscape
      ref="cyRef"
      :config="config">
      <cy-element
        v-for="def in config.elements"
        :key="`${def.data.id}`"
        :definition="def"/>
    </cytoscape>
  </div>
</template>

<script>

  // Vue.
  import Vue from 'vue'

  export default {
    name: "Perspective",
    data() {
      return {
        config: {
          style: [
            {
              selector: 'node',
              style: {
                'height': 45,
                'width': 45,
                'font-size': 16,
                'shape': 'square',
                'text-valign': 'center',
                'text-outline-color': '#cccccc',
                'text-outline-width': 2,
                'background-color': '#cccccc',
                'border-color': '#cccccc',
                'border-width': '3',
                'color': '#ffffff',
                'label': 'label'
              }
            },
            {
              selector: ':selected',
              style: {
                'border-width': 1,
                'border-color': '#ccc'
              }
            },
            {
              selector: 'edge',
              style: {
                'curve-style': 'unbundled-bezier',
                'opacity': 0.666,
                'width': '100',
                'target-arrow-shape': 'triangle',
                'source-arrow-shape': 'circle',
                'line-color': '#cbcbcb',
                'source-arrow-color': '#cbcbcb',
                'target-arrow-color': '#cbcbcb'
              }
            },
            {
              selector: 'edge.questionable',
              style: {
                'line-style': 'dotted',
                'target-arrow-shape': 'diamond'
              }
            },
            {
              selector: '.faded',
              style: {
                'opacity': 0.25,
                'text-opacity': 0
              }
            },
            {
              selector: '.multiline-auto',
              style: {
                'text-wrap': 'wrap',
                'text-max-width': 120
              }
            }
          ],
          layout: {
            name: 'cose',
            idealEdgeLength: 100,
            nodeOverlap: 4,
            refresh: 20,
            fit: true,
            padding: 30,
            randomize: false,
            componentSpacing: 100,
            nodeRepulsion: 400000,
            edgeElasticity: 100,
            nestingFactor: 5,
            gravity: 80,
            numIter: 1000,
            initialTemp: 1000,
            coolingFactor: 0.95,
            minTemp: 1.0
          },
          elements: []
        }
      }
    },
    props: [
      'noteID',
      'assetType'
    ],
    computed: {
      theUser () {
        return JSON.parse(localStorage.getItem('user'))
      }
    },
    methods: {
      getAssetGraph (noteID, assetType) {
        let self = this
        this.$axios.get(`/perspective/${noteID}/${this.theUser.userID}`)
        .then(function(response) {
          response.data.nodes.forEach(node => {
            self.config.elements.push({
              ...node,
              group: "nodes"
            })
          })
          response.data.edges.forEach(edge => {
            self.config.elements.push({
              ...edge,
              group: "edges"
            })
          })
        })
      }
    },
    mounted() {
      /**
       * 
       * Receive a route.
       * 
       * Assets.vue
       * 
       * Here, the route is dispatched from a: `<router-link>`.
       * 
       */
      if ( this.$route.params.noteID && this.$route.params.assetType ) {
        this.getAssetGraph(this.$route.params.noteID, this.$route.params.assetType)
      }
    }
  }

</script>

I've tried the "config.elements" data in the CodeSandbox example, and the entire example itself, but the errors are the same regardless.

VueCytoscape won't work in development.

[yetisir]

I had a similar issue - I was able to sort it out by upgrading Vue to version 2.6.10 or higher

[wfischer42]

I've seen similar problems related to import Vue from 'vue' before. The error is caused by creating a duplicate global Vue instance. I don't exactly know why it happens, but removing that import solves it when it does pop up.