Регистрация пользовательских фигур в моей библиотеке mxgraph в Vue.JS

В настоящее время я создаю редактор блок-схем с помощью MXGraph, и сегодня я импортировал его в свой проект Vue.JS. Я использовал NPM для установки библиотеки mxgraph и использовал следующий код для получения соответствующих ссылок в каждом файле:

import * as mxgraph from 'mxgraph';

const {
    mxClient, mxGraph, mxUtils, mxEvent, mxConstraintHandler, mxConnectionHandler, mxEditor, mxGraphModel, mxKeyHandler, mxConstants, mxGraphView
} = mxgraph();

Я импортировал свой редактор блок-схем в Vue.js в качестве плагина:

import Vue from 'vue'
import flowchartEditor from './plugins/flowchartEditor/flowchartEditor';


import App from './App.vue'
import store from './store/store'
import router from './router/router'

Vue.config.productionTip = false
Vue.use(flowchartEditor);

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

Инструмент блок-схемы имеет представление Vue с маршрутом, и когда я перехожу к этому маршруту, редактор блок-схемы выглядит нормально. Проблема в том, что все мои пользовательские зарегистрированные формы не работают. Узел Start должен быть круглым, но вместо этого все мои пользовательские формы выглядят квадратными:

Следующее изображение — это то, что я получил с тем же кодом, но не импортированным в Vue.JS, а только с Webpack:

Это код, который создает и регистрирует пользовательские формы:

addCustomShapes(graph) {
        //Ellipse that represents the start node
        function ellipse() {};
        ellipse.prototype = new mxEllipse();
        ellipse.prototype.constructor = ellipse;

        registerCustomShape(graph, ellipse, 'start');
    },

function registerCustomShape(graph, shape, name) {    
    mxCellRenderer.registerShape(name, shape);

    let style = graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_SHAPE] = name;
    style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
    style[mxConstants.STYLE_FONTSIZE] = '16';

    style = graph.getStylesheet().getDefaultEdgeStyle();
    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
    style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#ffffff';
    style['fontStyle'] = '0';
    style['fontStyle'] = '0';
    style[mxConstants.STYLE_FONTSIZE] = '16';
    style['startSize'] = '8';
    style['endSize'] = '8';
}

А затем код, который устанавливает вновь зарегистрированную форму в качестве формы по умолчанию, чтобы создать начальный узел в:

setCustomShape(graph, name) {
        var style = graph.getStylesheet().getDefaultVertexStyle();
        style[mxConstants.STYLE_SHAPE] = "4";

        return style
    }

Я знаю об учебнике MXGraph (руководство) и уже сделал это, но это дало мне тот же результат, что и этот код.

Извините за длинный пост, но я нахожу это очень странным, и я действительно надеюсь, что кто-то может мне помочь.