eslint-webpack-plugin: eslint-webpack-plugin emits no errors/warnings when using with babel-loader

Operating System: Win10
Node Version: 12.17.0
NPM Version: 6.14.8
webpack Version: 4.43.0
eslint-webpack-plugin Version: 2.4.1
babel-loader Version: 8.1.0
eslint-loader Version 4.0.2

Actual Behavior

It’s ok when using eslint-loader and babel-loader in webpack4 and we controlled their operation orders in config by using enforce: "pre" for eslint-loader. But after migrating from eslint-loader to eslint-webpack-plugin, eslint errors and warnings can’t emitted any more. Suppose the problem is that we can’t lint on the original source files by using eslint-webpack-plugin instead of eslint-loader.

Code

// webpack.config.js with eslint-loader
...
module.exports = env => {
    ...
    return {
        module: {
            rules: [
                {
                    test: /\.ts(x?)$/,
                    enforce: "pre",
                    include: [appPath],
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                    options: {
                        fix: false,
                        emitErrors: true,
                        failOnError: true,
                    }
                },
                {
                    test: /\.ts(x?)$/,
                    include: [appPath],
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                babelrc: false,
                                plugins: ["react-hot-loader/babel"],
                            }
                        },
                        {
                            loader: "awesome-typescript-loader",
                            options: {
                                configFileName: path.join(appPath, "tsconfig.json"),
                                silent: true,
                                useCache: true
                            }
                        }
                    ]
                }
            ]
        },
        ...
    }
}

// webpack.config.js with eslint-webpack-plugin
const ESLintPlugin = require('eslint-webpack-plugin');
...
module.exports = env => {
    ...
    return {
        module: {
            rules: [
                {
                    test: /\.ts(x?)$/,
                    include: [appPath],
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                babelrc: false,
                                plugins: ["react-hot-loader/babel"],
                            }
                        },
                        {
                            loader: "awesome-typescript-loader",
                            options: {
                                configFileName: path.join(appPath, "tsconfig.json"),
                                silent: true,
                                useCache: true
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new ESLintPlugin({
                extensions: ["ts", "tsx"],
                fix: false,
                emitError: true,
                emitWarning: true,
                failOnError: true
            }),
            ...
        ]
    }
}

How Do We Reproduce?

Maybe just use eslint-webpack-plugin and babel-loader together in one project.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 28 (1 by maintainers)

Most upvoted comments

Hi @mingluzhang

As your configuration is inside a folder, the plugin eslint-webpack-plugin understands that the context is Client/Project/Configuration/ only the files inside will be linted.

To solve this, just change the context path: https://github.com/mingluzhang/eslint-webpack-plugin-trouble-shoot/blob/main/Client/Project/Configuration/webpack.common.config.js#L44

plugins: [new ESLintWebpackPlugin({
    context: '../', // <-- change context path
    emitError: true,
    emitWarning: true,
    failOnError: true,
    extensions: ["ts", "tsx"],
    overrideConfigFile: "../.eslintrc.js"
})],

See https://github.com/webpack-contrib/eslint-webpack-plugin#context

ricardogobbosouza on Feb 17, 2021

@mingluzhang @ricardogobbosouza

I’m experiencing the same issue with eslint-webpack-plugin@2.4.3. However, downgrading to 2.1.0, based on the suggestion in this other issue, it works correctly.

mkhattab on Jan 23, 2021

I’m also having the same issue and it doesn’t matter what webpack mode I use (development or production). Even when I’m using webpack-dev-server, it just hangs completely, this is the only output I get in the console:

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/...
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣:

Operating System: macOS Big Sur (v11.1)
Node Version: 14.15.4
Yarn Version: 2.4.0
webpack Version: 5.18.0
webpack-dev-server Version: 3.11.2
eslint-webpack-plugin Version: 2.4.3
eslint Version: 7.18.0
babel-loader Version: 8.2.2
ts-loader Version: 8.0.14
fork-ts-checker-webpack-plugin Version: 6.1.0

// webpack.config.ts
import * as webpack from 'webpack';
import ESLintWebpackPlugin from 'eslint-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
...

const configuration: webpack.Configuration = {
  ...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'ts-loader', options: { transpileOnly: true } },
        ],
      },
    ],
  },
  plugins: [
    ...
    new ESLintWebpackPlugin({
      extensions: ['js', 'ts'],
      fix: true,
      failOnError: true,
      failOnWarning: true,
    }),

    new ForkTsCheckerWebpackPlugin(),
  ],
};

EDIT: After downgrading to v2.1.0, based on the @mkhattab suggestion, it works just fine.

EDIT 2: It seems even if it’s working now using v2.1.0, I faced another issue related to #70 (when not using failOnError: true, failOnWarning: true)

KarimTayel on Jan 28, 2021

a reminder for future visitors to double check that the webpack dev server quiet option is not enabled; as that might manifest itself in a similar way (lint errors not showing up when running dev server, build fails silently)

not that I would ever make such a silly mistake 😊

dpistoleKUBRA on Jun 16, 2021

I face a subset of this issue where Typescript related errors and warnings (for a rule like semi colon are not allowed) are not reported in certain situations.

If I declare an interface in a separate file, it doesn’t show any linting errors and if the same interface is moved inside the component file, it shows linting errors.

In my case, .eslintrc.json and webpack config file are in the same directory i.e. the root repository directory. And I want to lint everything inside the <repository_directory>/src/ directory.

As reported in other comments, it works for 2.1.0 and doesn’t work with the latest of 2 which is 2.6.0 as of today.

<repository_directory>/webpack.config.dev.js

module.exports = (env) => {
  return merge(common(env), {
    mode: 'development',
    plugins: [
      new ESLintPlugin({
        context: path.resolve(__dirname, 'src/'),
        extensions: ['ts', 'tsx']
      })
    ]
  })
}

Tried setting files property to **/*.tsx or **/*.(ts|tsx). It doesn’t work either.
If I run eslint src/, it works fine too but not with webpack plugin.
May be it is a separate issue, someone posted a similar issue on Stackoverflow.

riteshjagga on May 18, 2022