无法加载要扩展的配置“反应”

Question

我正在尝试使用以下网站创建一个不使用 create-react-app 的 React 应用程序：

https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/

然而，我不断收到这个错误，说

./src/index.js 模块警告中的警告（来自 ./node_modules/eslint-loader/dist/cjs.js）：无法加载要扩展的配置“反应”。

我已尝试安装所有依赖项并花了数小时在谷歌上搜索答案，但我似乎无法弄清楚问题所在。

这是我的 package.json：

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "format": "prettier --write \"src/**/*.js\"",
    "eslint-fix": "eslint --fix \"src/**/*.js\"",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.9.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.20.6",
    "html-webpack-plugin": "^4.4.1",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "prettier": "2.1.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

这是我的 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
      // path: __dirname + '/dist',
      path: path.resolve(__dirname, 'build'),
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './build'
    },
    module: {
      rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      }
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve('./index.html'),
        })],
  };

这是我的 .eslintrc：

  {
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

这是我的 .babelrc：

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }

有没有人有什么建议？我正在绞尽脑汁想弄清楚这一点，但遇到了很多麻烦。它加载网页，但是，根本没有使用反应。

先感谢您！！我真的很感谢你的帮助。

Answer 1

当我删除时

  "extends": [
      "react-app"
    ]
  },

从package.json它起作用了。

这是因为该eslint-config-react-app软件包已过时。

Answer 2

我有一个类似的问题，create-react-app我做了

yarn add eslint-config-react-app -D

我认为你应该尝试：

yarn add eslint-config-react -D

Answer 3

如果您有eslint依赖项，请将其删除。将使用
fromeslintreact-scripts

"eslint": "^7.32.0"

Answer 4

我手动修复安装eslint-config-react-app包：

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

Answer 5

在对依赖项 ( react-scripts, react... )进行大升级后出现此错误，解决方案是删除yarn.lock文件

Answer 6

我也有同样的问题。我做了这些步骤并且成功了。

将其安装为依赖项

npm i eslint-config-react-app

然后在根文件夹中创建一个文件名.eslintrc.json并在该文件中添加此代码

  "extends": "react-app"

Answer 7

我正在经历相同的教程并遇到了同样的问题。我想通了一些事情：

该软件包eslint-config-react已过时。它已经 4 年没有更新了，所以我卸载了它并安装了（作为 devDependency）eslint-config-airbnb。还有其他 eslint 配置包，但我听说 Airbnb 的风格指南非常受欢迎。然后在我的 eslintrc 文件中我替换"extends": "react"为"extends": "airbnb"：

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

问题是eslint-config-react包。