загрузка Vue компонента с зависимостью Vuetify с использованием require. js - PullRequest
Новая
       10

загрузка Vue компонента с зависимостью Vuetify с использованием require. js

0 голосов
/ 30 марта 2020

Я пытаюсь обновить интерфейсную часть приложения не-SPA (на основе Java / Tapestry5) до Vue / Vuetify.

Используется следующий рабочий процесс:

  • compile Vue компонент с использованием vue-cli-service build --mode development --target lib
  • загрузить полученный модуль с помощью require.js

И Vue, и Vuetify успешно загружены require.js, но загрузка скомпилированного компонента происходит сбой со следующей трассировкой стека: 

"TypeError: Cannot read property 'extend' of undefined
    at eval (webpack://index/./node_modules/vuetify/lib/mixins/themeable/index.js?:17:62)
    at Module../node_modules/vuetify/lib/mixins/themeable/index.js (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:1555:1)
    at __webpack_require__ (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:30:30)
    at eval (webpack://index/./node_modules/vuetify/lib/components/VApp/VApp.js?:4:75)
    at Module../node_modules/vuetify/lib/components/VApp/VApp.js (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:535:1)
    at __webpack_require__ (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:30:30)
    at eval (webpack://index/./node_modules/vuetify/lib/components/VApp/index.js?:2:63)
    at Module../node_modules/vuetify/lib/components/VApp/index.js (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:547:1)
    at __webpack_require__ (http://localhost:8080/eventdirector/modules.gz/v2/pages/index.umd.js:30:30)
    at eval (webpack://index/./src/main/vue/components/AppLayout.vue?:7:85)"

Ошибка не зависит от transpileDependencies, установленного в vue.config.js.

Скрипт загрузки довольно прост: 

define(['vue', 'vuetify'], function(Vue, Vuetify) {
    Vue.config.productionTip = false;
    Vue.use(Vuetify);
    return function(module, clientId, parameters) {
        console.log("loading module '" + module + "' with client ID '" + clientId + "' and parameters " + parameters);
        require([module + '.umd'], function(moduleClass) {
            new Vue({
                vuetify: new Vuetify(),
                render: function(handler) { handler(moduleClass, parameters) }
            }).$mount('#' + clientId);
        });
    };
});

В то же время загрузка скомпилированного компонента с использованием простого тега <script> работает без проблем.

Похожая проблема зарегистрирована на Vuetify tracker Некоторое время go, но был закрыт из-за несоблюдения правил отчетности о проблемах.

...