webpack eslint-webpack-plugin throws error

Viewed 1545

I am trying to use eslint-webpack-plugin to fix errors when building with webpack. It throws an 'ERROR in missing ) after argument list' that i don't believe originates from my code, since it builds correctly without the plugin. I want to use my local eslint, since I don't have it installed globally.

These ways of linting works without any problems:

  • vscode plugin
  • CLI: ./node_modules/.bin/eslint "./src/**" --fix --ext .ts,.tsx

Error output:

asset bundle.js 2.36 MiB [emitted] (name: main)
runtime modules 274 bytes 1 module
modules by path ./node_modules/ 938 KiB
  modules by path ./node_modules/scheduler/ 32.4 KiB 4 modules
  modules by path ./node_modules/react/ 59.4 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 59.2 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 840 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 839 KiB [built] [code generated]
  modules by path ./node_modules/prop-types/ 4 KiB
    ./node_modules/prop-types/checkPropTypes.js 3.69 KiB [built] [code generated]
    ./node_modules/prop-types/lib/ReactPropTypesSecret.js 314 bytes [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
./src/index.tsx 191 bytes [built] [code generated]

ERROR in missing ) after argument list

webpack 5.24.0 compiled with 1 error in 13249 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxxxxxxx@1.0.0 build: `npx webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xxxxxx@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

packages:

"devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "^4.15.2",
    "@typescript-eslint/parser": "^4.15.2",
    "eslint": "^7.20.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.5.2",
    "prettier": "^2.2.1",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "webpack": "^5.24.0",
    "webpack-cli": "^4.5.0"
    ...
  }

webpack.config

/* eslint-disable @typescript-eslint/no-var-requires */
const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
  mode: "development",
  entry: ["./src/index.tsx"],
  devtool: "inline-source-map",
  watchOptions: {
    ignored: /node_modules/,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  output: {
    path: `${__dirname}/dist`,
    publicPath: "/",
    filename: "bundle.js",
  },
  plugins: [
    new ESLintPlugin({
      context: __dirname,
      eslintPath: `${__dirname}/node_modules/.bin/eslint`,
      extensions: ["ts", "tsx"],
      files: "./src/**",
      fix: true,
      exclude: "node_modules",
    }),
  ],
};

I've tried various versions of the above config, but they all seem to fail

ts.config

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["es7", "dom"],
  },
  "exclude": [
    "./node_modules/**/*"
  ]
}

eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "airbnb-typescript", "plugin:@typescript-eslint/recommended", "prettier"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {} // this loads <rootdir>/tsconfig.json to eslint
    }
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": ["error", {
    "endOfLine":"auto"
  }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }],
    "no-console": "off",
    "react/destructuring-assignment": "off",
    "react/jsx-props-no-spreading": "off",
    "prefer-destructuring": ["error", {"object": true, "array": false}],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/naming-convention": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"]
  }
}
1 Answers

This can be a late reply but maybe will help someone. upgrade to latest node version to avoid this issue:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
Related