eslint-webpack-plugin no output file and no errors

Question

I am using Webpack to set up my dev environment for a ReactJS App using TypeScript. One of the plugins I wanted to make use of is ESLintPlugin which allows me to create a typechecking report in HTML format after I have started the dev server. Eventually I will move this to my webpack production configuration once I have it working.

At the moment, fork-ts-checker-webpack-plugin prints to the console type errors/warnings when I run "npm run dev" but eslint-webpack-plugin never outputs a report.

My webpack.dev.config.js file is as below:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    name: 'Quick Start React-TS-Jest',
    entry: {
        main: path.resolve(__dirname, 'src/App.tsx'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'dev.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: 
                        [ 
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/typescript'
                         ],
                        plugins: 
                        [ 
                            '@babel/proposal-class-properties',
                            '@babel/proposal-object-rest-spread',
                            'babel-plugin-typescript-to-proptypes'
                         ],
                         exclude: [/node_modules/]
                    },
                },
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ],
            },
            {
                test: /\.(.css|.scss)$/,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ],
            },
        ],
    },
    resolve: {
        extensions: [ '.ts', '.tsx', '.js', '.json' ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, 'src/index.html')
        }),
        new ForkTsCheckerWebpackPlugin({
            eslint : {
                files: 'src/**/*.{ts,tsx}'
            }
        }),
        new ESLintPlugin({
            failOnWarning: true,
            outputReport: {
                formatter: 'HTML',
                filePath: '../typeCheckReport.html'
            }
        })
    ],
};

I have got in one tsx files:

let test = 5;

which produces warnings in the terminal and I was expecting for eslint-webpack-plugin to output that in HTML format to a file which it doesn't.

Does anyone have any ideas?

Answer 1

Fixed with these lines

new ESLintPlugin({
  // Plugin options
  outputReport: {
     formatter: "HTML",
     filePath: './eslint_report.html',
  },
  extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
  eslintPath: require.resolve('eslint')
         
})

By default, it also logs to console