Webpack eslint-loader ignore .eslintrc parser

Question

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

1. npm install
2. npx eslint => No error (.eslintrc.json uses babel-eslint as parser)
3. npx webpack => Error as above

Answer 1

The 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:

https://github.com/dpwrussell/webpack-eslint-issue