无法加载要扩展的配置“@ljharb”。 （ESLint 8，网页包 5）

Question

I am in the process of upgrading packages for a project which uses Babel, Webpack, Eslint, and React. In doing my package updates I am running into errors when rebuilding the application and could love to see what I am possibly missing from my configurations to generate the following error:

ERROR in Failed to load config "@ljharb" to extend from.
Referenced from: C:\projects\project\node_modules\qs\.eslintrc

This project was originally using eslint-loader, but since that package is deprecated in favor of eslint-webpack-plugin and since I went from Webpack 4 to Webpack 5, I went through their documentation to update the config.js to reflect some new approaches. I believe I configured the options similar to the original implemented where eslint-loader was used, but I also do not believe this is the cause of my issues. What I do see is that it seems like my node_modules are being linted. I also know there are a lot of similar questions to this error, but most are around monorepo or nested node_modules, of which I have none and those solutions do not apply to this issue.

Steps I Have Taken I have done peer-dependency upgrades/installs for airbnb, which is where I believe this error originates. I have removed my node_modules, *-lock.json files, clean installs, and restarted VSCode and this error persists.

Here are my configurations:

package.json

{
  "name": "someProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "local": "webpack serve --env development",
    "build": "webpack --env production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "antd": "^4.18.2",
    "aws-amplify": "^4.3.11",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "connect-history-api-fallback": "^1.6.0",
    "dotenv": "^10.0.0",
    "express": "^4.17.2",
    "formik": "^2.2.9",
    "formik-antd": "^2.0.3",
    "history": "^5.2.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.0",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "reactstrap": "^9.0.1",
    "redux": "^4.1.2",
    "url-loader": "^4.1.1",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/eslint-parser": "^7.16.5",
    "@babel/plugin-transform-runtime": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/runtime": "^7.16.7",
    "autoprefixer": "^10.4.1",
    "babel-loader": "^8.2.3",
    "babel-node": "0.0.1-security",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.0",
    "css-loader": "^6.5.1",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^7.0.1",
    "nodemon": "^2.0.15",
    "postcss-loader": "^6.2.1",
    "precss": "^4.0.0",
    "prettier": "^2.5.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.0",
    "transform-runtime": "0.0.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  },
  "peerDependencies": {
    "postcss": "^8.0.0"
  },
  "author": "",
  "license": "ISC",
}

.eslintrc.json

{
    "root": true,
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "settings": {
        "react": {
            "version": "detect"
        },
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".json"]
            }
        }
    },
    "extends": [
        "airbnb",
        "prettier"
    ],
    "plugins": ["react", "react-hooks", "import", "jsx-a11y", "prettier"],
    "env": {
      "es6": true,
      "node": true
    },
    "rules": {
        "jsx-quotes": [
            2,
            "prefer-single"
        ],
        "comma-dangle": 0,
        "curly": [
            2,
            "all"
        ],
        "arrow-body-style": [
            2,
            "always"
        ],
        "camelcase": 0,
        "class-methods-use-this": 0,
        "consistent-return": 0,
        "import/no-extraneous-dependencies": 0,
        "import/no-useless-path-segments": 0,
        "jsx-a11y/label-has-associated-control": 0,
        "jsx-a11y/label-has-for": 0,
        "jsx-a11y/no-noninteractive-element-to-interactive-role": 0,
        "jsx-curly-spacing": 0,
        "import/no-named-as-default": 0,
        "import/no-named-as-default-member": 0,
        "no-case-declarations": 0,
        "no-console": 0,
        "no-continue": 0,
        "no-debugger": 0,
        "no-lonely-if": 0,
        "no-nested-ternary": 0,
        "no-param-reassign": 0,
        "no-plusplus": 0,
        "no-restricted-globals": 0,
        "no-trailing-spaces": 0,
        "no-underscore-dangle": 0,
        "no-unused-expressions": 0,
        "no-unused-vars": 0,
        "no-use-before-define": 0,
        "operator-linebreak": 0,
        "prefer-destructuring": 0,
        "react/destructuring-assignment": 0,
        "react/jsx-boolean-value": 0,
        "react/jsx-curly-spacing": 0,
        "react/jsx-filename-extension": 0,
        "react/jsx-no-bind": 0,
        "react/jsx-no-target-blank": 0,
        "react/jsx-one-expression-per-line": 0,
        "react/no-unused-state": 0,
        "react/prefer-stateless-function": 0,
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0,
        "react/sort-comp": 0,
        "react/no-access-state-in-setstate": 0,
        "template-curly-spacing": 0,
        "no-will-update-set-state": 0,
        "linebreak-style": [0, "error", "windows"]
    },
    "globals": {
        "document": false
    }
}

.eslintignore

**/node_modules/*
deploy/*
build/*
.ebextensions
.prettier*
**/test/**

.babelrc

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

webpack.config.js

const dotenv = require('dotenv');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const webpack = require("webpack");
const ESLintPlugin = require('eslint-webpack-plugin');
const preCSS = require('precss');
const autoPrefixer = require('autoprefixer');

const APP_DIR = path.resolve(__dirname, "./src");

dotenv.config();

const ESLINT_PLUGIN_OPTIONS = {
  extensions: ['js', 'jsx'],
  exclude: [
    '/node_modules/'
  ],
  fix: false,
  emitError: true,
  emitWarning: true,
  failOnError: true
};

module.exports = {
  devServer: {
    static: APP_DIR, // boolean | string | array, static file location
    historyApiFallback: true,
  },
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'main.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            postcssOptions: {
              plugins:
                // post css plugins, can be exported to postcss.config.js
                [
                  preCSS,
                  autoPrefixer
                ]
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.ttf$/, /\.pdf$/],
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },
    ],
  },
  plugins: [
    new ESLintPlugin(ESLINT_PLUGIN_OPTIONS),
    new HtmlWebPackPlugin({
      template: path.resolve("./src/index.html"),
      filename: "./index.html"
    }),
    autoPrefixer,
  ],
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'src/assets/'),
      Services: path.resolve(__dirname, 'src/services/'),
      Styles: path.resolve(__dirname, 'src/styles/'),
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      CommonComponents: path.resolve(__dirname, 'src/components/common/')
    }
  }
};

I know this issue resides in the webpack.config.js as changes in there are directly impacting the messages I see and no visible effect occurs within the other files being modified (eslintrc.json).

---

Edit:

(In webpack.config.js) When I comment out the eslint-webpack-plugin and associated code, the bundle generates, so the error is 100% around the move from eslint-loader to eslint-webpack-plugin. Is this a package version issue?

Answer 1

I ran into the same problem and also tried a thousand solutions, including all of the variations of **/node_modules/** in my.eslintignore file. What finally worked was changing it to the following:

.eslintignore

/dist
/.quasar
/node_modules
.eslintrc.js
babel.config.js

package.json dev dependencies

"devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
    "@quasar/app": "^2.4.3",
    "@quasar/quasar-app-extension-qcalendar": "^3.4.1",
    "@quasar/quasar-app-extension-qiconpicker": "^1.4.3",
    "@quasar/quasar-app-extension-qscroller": "^1.1.3",
    "@vue/eslint-config-standard": "^4.0.0",
    "eslint": "^8.10.0",
    "eslint-config-standard": "^16.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^9.0.0",
    "eslint-webpack-plugin": "^2.0.0",
    "mark.js": "^8.11.1",
    "vue-clipboard2": "^0.3.1"
  }

Also if you're using ESLint 7 you should be aware of this ESLint Github issue .