Я не эксперт в вебпаке, помогите пожалуйста разобраться в чем ошибка. Мне нужно прикрепить обработчик событий таким образом, и я не понимаю, что я делаю неправильно. Этот коллега написал этот конфиг веб-пакета, я еще не знаком с веб-пакетом.
class Store {
constructor(storeParams) {
this.products = storeParams.products;
this.container = document.querySelector('.js-goods');
}
renderProducts() {
const productTemplate = document.querySelector('.js-goods-temp');
for (let i = 0; i < this.products.length; i++) {
const item = productTemplate.content.cloneNode(true);
const id = this.products[i].id;
const titleElem = item.querySelector('.js-title');
const descrElem = item.querySelector('.js-info');
const imageElem = item.querySelector('.js-img');
const priceElem = item.querySelector('.js-price');
const btnAddElem = item.querySelector('.js-add');
titleElem.innerHTML = this.products[i].title;
descrElem.innerHTML = this.products[i].descr;
imageElem.src = this.products[i].image;
priceElem.innerHTML = this.products[i].price;
btnAddElem.setAttribute('data-id', id);
this.container.appendChild(item);
btnAddElem.addEventListener('click', function () {
console.log(this.products[i].id) // When I try to hang an event handler this way, an error is output to the console - see below
})
}
}
}
goods-item.js: 1 Uncaught Ошибка: сборка модуля не удалась (из ./node_modules/babel-loader/lib/index.js): TypeError:G: \ firststep \ store \ src \ components \ goods-item \ goods-item.js: path.inShadow не является функцией в ReplaceSupers.Function (G: \ firststep \ store \ node_modules \ babel-helper-replace-supers \lib \ index.js: 50: 15) в NodePath._call (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ path \ context.js: 53: 20) в NodePath.call (G: \ firststep \store \ node_modules @ babel \ traverse \ lib \ path \ context.js: 40: 17) в NodePath.visit (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ path \ context.js: 88: 12)в TraversalContext.visitQueue (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 112: 16) в TraversalContext.visitMultiple (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context. js: 79: 17) в TraversalContext.visit (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 138: 19) в Function.traverse.node (G: \ firststep \ store \ node_modules @столпотворение \ трaverse \ lib \ index.js: 80: 17) в NodePath.visit (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ path \ context.js: 95: 18) в TraversalContext.visitQueue (G: \firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 112: 16) в TraversalContext.visitSingle (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 84: 19) в TraversalContext.visit (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 140: 19) в Function.traverse.node (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ index. js: 80: 17) в NodePath.visit (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ path \ context.js: 95: 18) в TraversalContext.visitQueue (G: \ firststep \ store \ node_modules @)babel \ traverse \ lib \ context.js: 112: 16) в TraversalContext.visitMultiple (G: \ firststep \ store \ node_modules @ babel \ traverse \ lib \ context.js: 79: 17) в eval (веб-пакет: ///./src/components/goods-item/goods-item.js?:1:7) в объекте ../ src / components / goods-item / goods-item.js (http://localhost:9000/js/app.min.js:96:1) в webpack_require (http://localhost:9000/js/app.min.js:20:30) на eval(webpack: ///./src/static/js/index.js?: 3: 18) в Object ../ src / static / js / index.js (http://localhost:9000/js/app.min.js:108:1) в webpack_require (http://localhost:9000/js/app.min.js:20:30) при http://localhost:9000/js/app.min.js:84:18 при http://localhost:9000/js/app.min.js:87:10