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"]
}
}