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

Question

I am not an expert in webpack, please help me understand what the error is. I need to attach an event handler this way, and I don't understand what I'm doing wrong. This colleague wrote this webpack config, I am still not familiar with the 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 Uncaught Error: Module build failed (from./node_modules/babel-loader/lib/index.js): TypeError: G:\firststep\store\src\components\goods-item\goods-item.js: path.inShadow is not a function at ReplaceSupers.Function (G:\firststep\store\node_modules\babel-helper-replace-supers\lib\index.js:50:15) at NodePath._call (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:53:20) at NodePath.call (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:40:17) at NodePath.visit (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:88:12) at TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\lib\context.js:112:16) at TraversalContext.visitMultiple (G:\firststep\store\node_modules@babel\traverse\lib\context.js:79:17) at TraversalContext.visit (G:\firststep\store\node_modules@babel\traverse\lib\context.js:138:19) at Function.traverse.node (G:\f irststep\store\node_modules@babel\traverse\lib\index.js:80:17) at NodePath.visit (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:95:18) at TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\lib\context.js:112:16) at TraversalContext.visitSingle (G:\firststep\store\node_modules@babel\traverse\lib\context.js:84:19) at TraversalContext.visit (G:\firststep\store\node_modules@babel\traverse\lib\context.js:140:19) at Function.traverse.node (G:\firststep\store\node_modules@babel\traverse\lib\index.js:80:17) at NodePath.visit (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:95:18) at TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\lib\context.js:112:16) at TraversalContext.visitMultiple (G:\firststep\store\node_modules@babel\traverse\lib\context.js:79:17) at eval (webpack:///./src/components/goods-item/goods-item.js?:1:7) at Object../src/components/g oods-item/goods-item.js ( http://localhost:9000/js/app.min.js:96:1 ) at webpack_require ( http://localhost:9000/js/app.min.js:20:30 ) at eval (webpack:///./src/static/js/index.js?:3:18) at Object../src/static/js/index.js ( http://localhost:9000/js/app.min.js:108:1 ) at webpack_require ( http://localhost:9000/js/app.min.js:20:30 ) at http://localhost:9000/js/app.min.js:84:18 at http://localhost:9000/js/app.min.js:87:10

Answer 1

solved the problem - set another preset @babel/preset-env instead babel-preset-env ,

thanks to the advice of @loganfsmyth