带有Webpack和ES6的项目中的奇怪错误

Question

我不是webpack的专家，请帮助我了解错误是。我需要以这种方式附加事件处理程序，但我不明白我在做什么错。这位同事写了这个webpack配置，我对Webpack仍然不熟悉。

    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未捕获的错误：模块构建失败（来自./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 @ 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.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）在评估时（webpack：///./src/components/goods-item/goods-item.js？：1：7）在Object ../ 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）在评估时（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

Answer 1

已解决问题-设置另一个预设@babel/preset-env代替babel-preset-env，

感谢@loganfsmyth的建议