I'm having an issue with webpack, specifically eslint-loader.
I have a JS file, with code like:
class Test {
MyProp = "MyValue"
}
export default Test;
Initially, when I called npx eslint ., I got:
D:\repro\src\main\js\index.js
3:12 error Parsing error: Unexpected token =
I've read somewhere I had to add "parser": "babel-eslint" to .eslintrc for some reason.
That did fix the issue with npx eslint, but I still have the issue with npx webpack:
ERROR in ./src/main/js/index.js 3:11
Module parse failed: Unexpected token (3:11)
File was processed with these loaders:
* ./node_modules/eslint-loader/dist/cjs.js
I must have forgot some configuration somewhere, but I can't seem to find where.
To reproduce this, consider this repo:
https://github.com/slacaze/webpack-eslint-issue
npm installnpx eslint => No error (.eslintrc.json uses babel-eslint as parser)npx webpack => Error as aboveThe issue is not that your eslint is failing, it is that this source is not packable without running it through babel. You need to use babel-loader to actually transpile your code, estlint-loader is merely checking your syntax.
First, you need to add the babel-loader as shown here: https://webpack.js.org/loaders/babel-loader/
Install:
npm install -D babel-loader @babel/core @babel/preset-env webpack
Then configure (remember the order is bottom to top so put this above the eslint entry):
{
test: /\.?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
Also, classProperties is not enabled by default so you'll need that as well: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
Install:
npm install --save-dev @babel/plugin-proposal-class-properties
Configure by adding a .babelrc:
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
As in this updated version: