This article is for those who use ES6 syntax along with Webpack. After I started using Javascript with Webpack I met a lot of unexpected errors. All of them were because of ES6 syntax usage. Those of you who decided to start javascript using "Classes" or you need to use ESlint I'll try to explain how to save some time. In short, it's all about loaders. Class fields or class properties. A quite useful feature, isn't it? But the problem is that Webpack doesn't know how to deal with it. Let's look at the example. The result variable is the class field. After trying to build we get the error. Now you need to install "babel-loader". Use . npm install -D babel-loader @babel/core @babel/preset-env webpack After the installation process, you need to add this piece of code into you section of a file rules webpack.config.js . { : , : , : , : { : [ , { : [ ], }, ], }, } test /\.m?js$/ exclude /(node_modules)/ loader 'babel-loader' options presets '@babel/preset-env' plugins '@babel/plugin-proposal-class-properties' And the whole file should look similar to this. That's it. Now you are able to use class fields. Case 2 - "ESlint" If you use ESlint along with some of the ES6 syntax, then you will have to use babel-eslint. First, add this command: npm eslint --save-dev install babel-eslint Then put this .exports = { : , }; module parser "babel-eslint" into your file. .eslintrc.js That's it! If I knew it before it could have saved a lot of time for me. I hope you found this guide useful. If you have any questions, please let me know in the comments below!
