eslint-loader failOnError option doesn't work with ts-loader and webpack-dev-server

Question

Abstract

• To compile TypeScript with webpack, I use ts-loader.
• When using webpack-dev-server, the error message may be displayed incorrectly.
• Repository: https://github.com/pvcresin/eslint-ts-loader-error.

Problems

• eslint-loader does not stop compiling, and ts-loader error is displayed.
• ts-loader error is still old even if the TS code is rewritten.

Procedure

1. Start dev-server: yarn start = webpack-dev-server --mode development

package.json

{
  "name": "eslint-ts-loader-error",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.30.0",
    "@typescript-eslint/parser": "2.30.0",
    "babel-loader": "8.0.6",
    "eslint": "6.8.0",
    "eslint-loader": "4.0.2",
    "ts-loader": "6.2.2",
    "typescript": "3.8.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              failOnError: true,
            },
          },
        ],
      },
    ],
  },
};

2. Edit and save .ts file.

main.ts

const a: string = 100;
console.log(a);

-> Error: ts-loader (As expected)

ts-loader: Type '100' is not assignable to type 'string'.

3. Edit and save .ts file.

const a: string = 100;
// console.log(a);

-> Error: eslint-loader, ts-loader (Unexpected)

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

[Expected] When an error occurs in eslint-loader, the compilation process is stopped and the error of ts-loader is not displayed.

4. Edit and save .ts file.

const a: boolean = 100;
// console.log(a);

-> Error: eslint-loader, ts-loader (Unexpected)

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

ts-loader error is not the latest one, it's the old one!

Is this evidence that the processing is not up to the ts-loader?

I'm not sure why this is happening.

Is it a problem of webpack-dev-server instead of eslint-loader?

I need someone to help me.

Envirioment

• macOS Catalina v10.15.4
• Node.js v12.16.2
• npm v6.14.4
• yarn v1.22.4

Answer 1

Ask on GitHub's Issue.

I use https://github.com/webpack-contrib/eslint-webpack-plugin and it works! :tada:

https://github.com/webpack-contrib/eslint-loader/issues/327