【发布时间】：2022-12-21 05:16:30
【问题描述】：
我正在为一个使用 Babel、Webpack、Eslint 和 React 的项目升级包。在进行我的包更新时，我在重建应用程序时遇到了错误，并且很想看看我的配置中可能缺少什么以生成以下错误：
ERROR in Failed to load config "@ljharb" to extend from.
Referenced from: C:\projects\project\node_modules\qs\.eslintrc
这个项目最初使用的是 eslint-loader，但由于该包已被弃用，取而代之的是 eslint-webpack-plugin，并且自从我从 Webpack 4 转到 Webpack 5 以来，我浏览了他们的文档以更新 config.js 以反映一些新方法.我相信我配置的选项类似于使用 eslint-loader 的原始实现，但我也不认为这是我出现问题的原因。我看到的是我的 node_modules 似乎被检查了。我也知道这个错误有很多类似的问题，但大多数都是围绕 monorepo 或嵌套的 node_modules，我没有，这些解决方案不适用于这个问题。
我采取的步骤我已经为 airbnb 完成了对等依赖升级/安装，我认为这是此错误的来源。我已删除我的 node_modules、*-lock.json 文件、全新安装并重新启动 VSCode，但此错误仍然存在。
这是我的配置：
包.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/')
}
}
};
我知道这个问题存在于 webpack.config.js 中，因为其中的更改直接影响我看到的消息，并且在其他正在修改的文件 (eslintrc.json) 中没有发生明显的影响。
编辑：
（在 webpack.config.js 中）当我注释掉 eslint-webpack-plugin 和相关代码时，会生成包，因此在从 eslint-loader 到 eslint-webpack-plugin 的过程中，错误是 100%。这是包版本问题吗？
【问题讨论】：
-
你有没有在这方面取得进展？