Das Laden der Konfiguration „Reagieren“ zum Erweitern ist fehlgeschlagen

Ich versuche, über die folgende Website eine Reaktions-App zu erstellen, ohne die Create-React-App zu verwenden:

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

Ich erhalte jedoch immer wieder die Fehlermeldung

WARNUNG in ./src/index.js Modulwarnung (von ./node_modules/eslint-loader/dist/cjs.js): Fehler beim Laden der Konfiguration „react“, um sie zu erweitern.

Ich habe versucht, alle Abhängigkeiten zu installieren und habe Stunden damit verbracht, eine Antwort zu googeln, aber ich kann das Problem scheinbar nicht herausfinden.

Das ist meine 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"
  }
}

Das ist meine 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: "https://stackoverflow.com/",
      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'),
        })],
  };

das ist meine .eslintrc:

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

und das ist meine .babelrc:

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

Hat jemand Vorschläge? Ich zerbreche mir den Kopf, um das herauszufinden, und habe große Schwierigkeiten. Es lädt die Seite, reagiert jedoch überhaupt nicht.

Vielen Dank im Voraus!! Ich schätze Ihre Hilfe wirklich sehr.

Ich hatte ein ähnliches Problem mit create-react-app und ich tat

yarn add eslint-config-react-app -D

Ich denke, Sie sollten Folgendes versuchen:

yarn add eslint-config-react -D

Als ich entfernte

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

aus package.json es funktionierte.

Dies liegt daran, dass die eslint-config-react-app Paket ist veraltet.

Ich hatte diesen Fehler nach einem großen Upgrade der Abhängigkeiten (react-scripts, react … ) und die Lösung bestand darin, sie zu entfernen yarn.lock Dateien

Wenn Sie haben eslint Entfernen Sie das in Ihren Abhängigkeiten.
Der eslint aus react-scripts verwendet wird

"eslint": "^7.32.0"

Ich behebe es bei der Installation eslint-config-react-app Paket manuell:

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

Wenn Sie Garn verwenden:

1- Löschen: node_modules und Yarn.lock
2- Ausführen: Garninstallation

Hinweis: Für npm sollte der gleiche Ansatz gelten.

Ich hatte das gleiche Problem. Ich habe diese Schritte ausgeführt und es hat funktioniert.

Installieren Sie es als Abhängigkeit

npm i eslint-config-react-app

Erstellen Sie dann in Ihrem Stammordner einen Dateinamen .eslintrc.json und fügen Sie diesen Code in diese Datei ein

  "extends": "react-app"