(Shopware 6) Интеграция пользовательского пакета NPM в администрирование ⇐ Javascript

[Anonymous]

Я хочу попытаться интегрировать функциональность пакета vueDraggable https://www.npmjs.com/package/vue-marageable в администрирование Shopware 6 (версия 6.6.10.0).
Я следил за этим руководством
https://developer.shopware.com/docs/gui ... ncies.html, тем не менее, я все еще, кажется, получаю некоторые ошибки.
Мои текущие файлы:
resource/app/administration/build/webpack.config.js:

const { join, resolve } = require('path');

module.exports = () => {
return {
resolve: {
alias: {
'@chartjs': resolve(
join(__dirname, '..', 'node_modules', 'vuedraggable')
),
}
}
};
}
< /code>
Я также также попробовал следующий пример: < /p>
module.exports = (params) => {
return {
resolve: {
modules: [
`${params.basePath}/Resources/app/storefront/node_modules`,
],
}
};
}
< /code>
Компонент администрирования, который я пытаюсь переопределить (index.js) < /p>

import template from './sw-product-detail.html.twig';
import './sw-product-detail.scss';
import Draggable from "vuedraggable";

const { Criteria } = Shopware.Data
const { Mixin } = Shopware;

Shopware.Component.override('sw-product-detail-base', {
template,
components: {
Draggable
},

data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" }
]
};
}
});

< /code>
Компонент администрирования, который я пытаюсь переопределить (шаблон Twig) < /p>

{% block sw_product_detail_base_media %}
{% parent() %}
{% block media_list %}

Draggable List



{{ element.name }}




{% endblock %}
{% endblock %}

< /code>
Прямо сейчас я просто пытаюсь воспроизвести очень простой список перетаскивания. Приведенный выше код работает нормально в стандартном проекте VUE и дает следующий результат.
/p>
Пример кода из моего пользовательского проекта VUE: < /p>


import Draggable from "vuedraggable";

export default {
components: {
Draggable
},
data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" },
],
};
},
};




Draggable List



{{ element.name }}







.draggable-item {
padding: 10px;
margin: 5px;
background-color: lightgray;
cursor: grab;
}


< /code>
Shopware, однако, кажется, борется с загрузкой самого компонента, так как у меня есть это сообщение об ошибке при попытке отображать список: < /p>
< img alt = "Введите описание изображения здесь" src = "https://i.sstatic.net/jpmvh5b2.png"/>
Я думаю, что мой общий подход верен, Как я попробовал это с некоторыми другими пакетами, это не включало пользовательские компоненты VUE, и это работало просто отлично.
рендеринговые компоненты из других пакетов, похоже, создают эту проблему.
Любая помощь будет высоко оценена! < /p>
Заранее. < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... nistration