Estoy tratando de crear una aplicación de reacción sin usar create-react-app usando el siguiente sitio web:

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

sin embargo, sigo recibiendo este error que dice

ADVERTENCIA en ./src/index.js Advertencia de módulo (de ./node_modules/eslint-loader/dist/cjs.js): No se pudo cargar la configuración "reaccionar" para extender desde.

Intenté instalar todas las dependencias y pasé horas buscando en Google una respuesta, pero parece que no puedo resolver el problema.

Este es mi paquete.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" } }

este es mi 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'), })], };

este es mi .eslintrc:

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

y este es mi .babelrc:

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

¿Alguien tiene alguna sugerencia? Estoy rompiendo mi cerebro tratando de resolver esto y estoy teniendo muchos problemas. Carga la página web, sin embargo, la reacción no se utiliza en absoluto.

¡¡Gracias de antemano!! Realmente aprecio toda tu ayuda.