Setting typescript with airbnb-eslint and webpack with node js

[north jetty]

I am trying to setup airbnb eslint with webpack and node js but when I start my webpack server I do not see any errors but on running eslint i get errors like

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/webpack.config.ts` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json

I am not sure what exactly I am doing wrong but i guess issue is is with passing eslint config to webpack ?
I want to setup eslint with webpack5 and airbnb rules for node environment. Can anyone please help ?

This has my current setup
https://replit.com/join/nuqlrfrsfu-shreyansjain4

[limpid wharf]

@north jetty I don't think it's normal to have eslint output from webpack.

[north jetty]

but I should be able to add eslint check in webpack while development know ?

We have plugins like eslint-webpack-plugin for the same know ?
https://webpack.js.org/plugins/eslint-webpack-plugin/

[limpid wharf]

Yeah, if you want to configure that plugin you can.

(Maybe you already have; the link you sent directed me to a login screen and I didn't really want to login)

[north jetty]

I tried but I think I made some mistake

[limpid wharf]

I don't really see the point, personally. I see eslint errors in my editor and I run eslint on push (and on CI, if relevant), and personally I think that works fine

[north jetty]

wait I will send you some open link which does not require login

I want to stop code compilation if there is issue with eslint.

[limpid wharf]

I guess you could do that, but I wouldn't.

It doesn't seem necessary (a lot of eslint errors aren't critical issues, just style/best practices), and it'll slow your compile/rebuild speed down if you make linting a critical part of the process.

[north jetty]

I am fine with making linting a critical part of the process because in case of large codebases where lot of people are working it might stops errors before they come up

[limpid wharf]

In a large codebase, compilation is already going to be slow enough before adding linting in.

I don't even block compilation on type errors, personally: (fork-ts-checker-plugin + something like swc is way faster than tsc compilation).

But anyway, just my two cents, I guess.

[north jetty]

will look into that

my webpack.config.ts

import path from 'path'
import nodeExternals from 'webpack-node-externals'
import { Configuration } from 'webpack'
import WebpackShellPluginNext from 'webpack-shell-plugin-next'
// const ESLintPlugin = require('eslint-webpack-plugin')
import ESLintPlugin from 'eslint-webpack-plugin'
import eslint from './.eslintrc.json'

const getConfig = (env: { [key: string]: string }, argv: { [key: string]: string }): Configuration => {
  require('dotenv').config({
    path: path.resolve(__dirname, `.env.${env.mode}`)
  })
  return {
    entry: './src/index.ts',
    target: 'node',
    mode: argv.mode === 'production' ? 'production' : 'development',
    externals: [nodeExternals()],
    plugins: [
      new ESLintPlugin({
        overrideConfig: eslint
      }),
      new WebpackShellPluginNext({
        onBuildStart: {
          scripts: ['yarn run clean:dev && yarn run clean:prod'],
          blocking: true,
          parallel: false
        },
        onBuildEnd: {
          scripts: ['yarn run dev'],
          blocking: false,
          parallel: true
        }
      })
    ],
    module: {
      rules: [
        {
          test: /\.(ts|js)$/,
          loader: 'ts-loader',
          options: {},
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        src: path.resolve(__dirname, 'src')
      }
    },
    output: {
      path: path.join(__dirname, 'build'),
      filename: 'index.js'
    },
    optimization: {
      moduleIds: 'deterministic',
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

export default getConfig

my .eslintrc.json

{
    "env": {
      "es2021": true,
      "node": true
    },
    "extends": ["airbnb-base", "airbnb-typescript/base"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "plugins": ["@typescript-eslint", "prettier"]
  }

.tsconfig.json

{
  "compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "sourceMap": true,
  "strict": true,
  "moduleResolution": "node",
  "esModuleInterop": true,
  "allowJs": true,
  "allowSyntheticDefaultImports": true,
  "forceConsistentCasingInFileNames": true,
  "noFallthroughCasesInSwitch": true,
  "resolveJsonModule": true,
  "isolatedModules": true,
  "baseUrl": "."
  },
  "include": ["src/**/*.ts", "src/index.ts"],
  "exclude": ["node_modules", "src/**/*.spec.ts",   "src/**/__tests__/*.ts"]
  }

@limpid wharf Can you please help here ?

[limpid wharf]

I don't see anything obviously wrong with that. You'll want failOnError (and maybe failOnWarning) if you want it to fail the build on errors.

Parsing error: ESLint was configured to run on <tsconfigRootDir>/webpack.config.ts using parserOptions.project: <tsconfigRootDir>/tsconfig.json
I think this is the thing where you need to make a special tsconfig for ts/eslint: #help-spruce message

This is a limitation of type-powered linting. Not sure if that's the issue with the webpack setup, though.

[north jetty]

I think I found my error in webpack.config.ts

new ESLintPlugin({
        // overrideConfig: eslint,
        extensions: ['ts', 'tsx'],
        // failOnError: true
        useEslintrc: true
      }),

Simple boolean had to be made true. Now it builds and shows error from eslint as well