"When I right-click on a node with my mouse, it's all good and shows the menu options I set up. But when I click on a blank area, I get this error popping up saying 'i.is is not a function TypeError: i.is'. Any idea how I can fix this?"

[vinci3123]

<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <!-- <p>{{ layoutName }}</p> -->
        <h2>Renmai Sys</h2>
        <el-button type="primary" @click="addNode">添加</el-button>
      </el-col>
    </el-row>

    <!-- 添加新节点 -->
    <el-dialog title="添加新节点" v-model="showAddNodeModal" width="30%">
      <el-input v-model="newNodeLabel" placeholder="输入节点标签"></el-input>
      <template v-slot:footer>
        <el-button @click="cancelAddNode">取消</el-button>
        <el-button type="primary" @click="confirmAddNode">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog title="连接节点" v-model="showAddEdgeModal" width="30%">
      <el-select v-model="targetNodeId" placeholder="请选择">
        <el-option
          v-for="node in cy.nodes()"
          :key="node.id()"
          :label="node.data('label')"
          :value="node.id()">
        </el-option>
      </el-select>
      <template v-slot:footer>
        <el-button @click="cancelAddEdge">取消</el-button>
        <el-button type="primary" @click="confirmAddEdge">确定</el-button>
      </template>
    </el-dialog>
    <div id="cy"></div>
  </div>
</template>

<script>
import cytoscape from 'cytoscape';
import contextMenus from 'cytoscape-context-menus';

import axios from 'axios';
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';  // optional for styling
import popper from 'cytoscape-popper';

cytoscape.use(popper);  

// 注册右键菜单插件
cytoscape.use(contextMenus);

// import 'cytoscape-context-menus/cytoscape-context-menus.css';

export default {
  name: 'App',
  data() {
    return {
      cy: null,
      layoutName: 'cose',
      showAddNodeModal: false,  // 控制添加节点模态窗口的显示
      newNodeLabel: '',  // 新节点的标签
      showAddEdgeModal: false,  // 控制添加连接模态窗口的显示
      sourceNodeId: null,  // 源节点ID
      targetNodeId: null  // 目标节点ID
    };
  },
  mounted() {
    this.initCytoscape();
    this.loadPersonsAndRelations();
    this.setupTippy();
  },
  methods: {
    initCytoscape() { 
      this.cy = cytoscape({
        container: document.getElementById('cy'),
        layout: {
          name: 'cose',
          animate: false
        },
        wheelSensitivity: 0.1,
        minZoom: 0.5,
        maxZoom: 3,
        style: [
        {
            selector: 'node',
            style: {
              'background-color': '#31c1e8',
              'label': 'data(label)',
              'shape': 'data(shape)',
              'width': 'mapData(importance, 1, 5, 10, 20)',
              'height': 'mapData(importance, 1, 5, 10, 20)'
            }
          },
          {
            selector: 'edge',
            style: {  
              'width': 'mapData(intimacy_level, 1, 5, 1, 3)',
              'line-color': 'mapData(intimacy_level, 1, 5, lightgray, red)',
              'target-arrow-color': 'black',
              'target-arrow-shape': 'none',
              'curve-style': 'bezier'
            }
          }
        ],

      });
      // 单独初始化右键菜单
      this.cy.contextMenus({
          menuItems: [
                {
                  id: 'add-node',
                  content: '添加节点',
                  selector: 'node',
                  //coreAsWell: true,
                  //show: true,
                  onClickFunction: this.addNode
                }
          ]
      });

      //this.cy.resize(); 
    },