Estoy tratando de crear una aplicación de reacción sin usar create-react-app usando el siguiente sitio web:
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.
Estaba siguiendo el mismo tutorial y me encontré con el mismo problema. Descubrí algunas cosas:
El paquete eslint-config-react está desactualizado. No se ha actualizado en 4 años, así que lo desinstalé y en su lugar instalé (como una dependencia de desarrollo) eslint-config-airbnb . Hay otros paquetes de configuración de eslint, pero la guía de estilo de Airbnb que escuché es muy popular. Luego, en mi archivo eslintrc, reemplacé "extends": "react" por "extends": "airbnb" :
{ "parser": "babel-eslint", "extends": "airbnb", "env": { "browser": true, "node": true }, "settings": { "react": { "version": "detect" } } } El problema es el eslint-config-react .
Dejando esto aquí para futuras referencias:
En mi caso, esto sucedía porque estaba usando Lerna y estaba elevando algunas de las dependencias necesarias. Agregar la opción nohoist al archivo lerna.json resolvió el problema:
"nohoist": [ "*react*", "*react*/**", "*react-native*", "*react-native*/**" ],Tuve un problema similar con create-react-app y lo hice
yarn add eslint-config-react-app -DCreo que deberías probar:
yarn add eslint-config-react -DTuve este error después de una gran actualización de dependencias ( react-scripts , react ...) y la solución fue eliminar los archivos yarn.lock
Enfrenté el mismo error cuando intentaba implementar mi plantilla de crear-reaccionar-aplicación en Vercel.
me ayudó a implementar con éxito.
Si tiene eslint en sus dependencias, elimínelo.
Se usará el eslint de react-scripts
"eslint": "^7.32.0"Si clonó el repositorio de GitHub o cualquier otro sistema de control de versiones, intente agregar este archivo .eslintrc.json a su carpeta raíz. No olvides el . al principio.
La primera respuesta también funciona a las mil maravillas. Solo pensé en agregar el mío también.
Yo estaba teniendo el mismo problema. Hice estos pasos y funcionó.
Instalarlo como una dependencia
npm i eslint-config-react-appluego, en su carpeta raíz, cree un nombre de archivo .eslintrc.json y agregue este código en ese archivo
"extends": "react-app"Tengo el mismo problema.
Funcionó bien.
Si está utilizando Yarn 2 (berry)
Agregue nodeLinker: node-modules en su archivo .yarnrc.yml
Como se especifica en https://yarnpkg.com/getting-started/install
Después de recibir el mensaje "Error al cargar la configuración "react-app" para extender desde... eliminé las siguientes líneas de package.json:
"eslintConfig": { "extends": [ "react-app" ] },Y funcionó
Para solucionar este problema, debe ejecutar este comando en la carpeta de su proyecto. Primer paso:
yarn set version berryDespués de ejecutar eso, se generará un archivo y una carpeta en su carpeta local (carpeta del proyecto):
Segundo paso: agregue nodeLinker: node-modules en su archivo .yarnrc.yml
Tercer paso: ejecuta este comando yarn install
Finalmente ejecutar yarn start
Sugerencia : este enfoque es útil cuando desea migrar de yarn 1.x a 2.x o 3x o superior.
Lo arreglo instalando eslint-config-react-app manualmente:
yarn add eslint-config-react-app -D # or npm install -D eslint-config-react-appcuando eliminé
"extends": [ "react-app" ] }, de package.json funcionó.
Esto se debe a que el eslint-config-react-app está desactualizado.
incluso tuve este problema, enumerando los pasos para resolver este problema.
npm agregar eslint-config-react-aplicación
Si usas hilo:
1- Eliminar: node_modules y yarn.lock
2- Ejecutar: instalación de hilo
Nota: Para npm debe ser el mismo enfoque.