使用 Webpack 和 ES6 的项目中出现奇怪的错误答案

【问题标题】：Strange error in project with Webpack and ES6使用 Webpack 和 ES6 的项目中出现奇怪的错误
【发布时间】：2019-10-24 21:28:36
【问题描述】：

我不是 webpack 方面的专家，请帮我了解一下错误是。我需要以这种方式附加一个事件处理程序，我不明白我做错了什么。这位同事写了这个 webpack config，我对 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 is not a function 在 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) 在 eval (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) 在 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

【问题讨论】：

你的 Babel 配置是什么？听起来您在 Babel 7 上使用了 Babel 6 插件，这通常不适用于 Babel 的第一方插件。
分享您的 webpack.config.js/webpack.config，以便我们为您提供帮助。
@loganfsmyth 你的建议对我有帮助
@VictorCastro 感谢朋友的回复，我解决了问题！

标签： javascript webpack ecmascript-6 es6-class

【解决方案1】：

解决了问题 - 设置另一个预设 @babel/preset-env 而不是 babel-preset-env，

感谢@loganfsmyth 的建议

【讨论】：