Búsqueda de sitios web

javascript - error de ESLint - ESLint no pudo encontrar la configuración "react-app"

Yo con mi equipo, iniciamos un nuevo proyecto de React usando el comando de arranque create-react-app. Agregamos la sección de eslint en el proyecto pero nos quedamos atascados con un error molesto que nunca habíamos encontrado antes. Cuando ejecutamos el comando

 yarn run lint

Aquí el error:

Aquí está el package.json:

{
  "name": "name of the app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jwt-decode": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^5.0.1"
  },
  "scripts": {
    "analyze": "react-app-rewired build",
    "build": "react-scripts build",
    "cypress": "./node_modules/.bin/cypress open",
    "eject": "react-scripts eject",
    "lint:write": "eslint --debug src/ --fix",
    "lint": "eslint --debug src/",
    "prettier": "prettier --write src/*.tsx src/*.ts src/**/*.tsx src/**/*.ts src/**/**/*.tsx src/**/**/*.ts src/**/**/**/*.tsx src/**/**/**/*.ts src/**/**/**/**/*.tsx src/**/**/**/**/*.ts",
    "start": "react-scripts start",
    "storybook": "start-storybook -p 6006 -c .storybook",
    "test": "react-scripts test",
    "upgrade:check": "npm-check",
    "upgrade:interactive": "npm-check --update"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "yarn run prettier"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.2",
    "@storybook/addon-actions": "^5.3.12",
    "@storybook/addon-info": "^5.3.12",
    "@storybook/addon-knobs": "^5.3.12",
    "@storybook/addon-links": "^5.3.12",
    "@storybook/addons": "^5.3.12",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.12",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/storybook__addon-knobs": "^5.2.1",
    "@types/styled-components": "^4.4.2",
    "cypress": "^4.0.1",
    "eslint": "^6.8.0",
    "husky": "^4.2.1",
    "lint-staged": "^10.0.7",
    "npm-check": "^5.9.0",
    "prettier": "^1.19.1",
    "react-app-rewire-webpack-bundle-analyzer": "^1.1.0",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "redux-devtools-extension": "^2.13.8",
    "storybook-addon-jsx": "^7.1.14",
    "ts-loader": "^6.2.1",
    "typescript": "~3.7.2",
    "webpack": "^4.41.6",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

También intentamos crear un archivo .eslintrc y agregar

{
  "extends": "react-app"
}

Pero nada cambia.

Respuesta #1

react-scripts ya debería incluir ESLint y la configuración de ESLint eslint-config-react-app (ver documentación) en tus dependencias de Node.

No necesitas instalarlo por separado en los proyectos de Create React App.

Si ESLint no puede encontrar la configuración react-app, probablemente haya dependencias de configuración de ESLint en conflicto o duplicadas que fueron instaladas fuera de react-scripts (es decir, otra instalación de eslint-config-react-app). Puedes comprobarlo usando el comando npm ls [package] (es decir, npm ls eslint-config-react-app).

Probablemente la mejor manera de abordar esto es eliminar esos paquetes de package.json para permitir que se usen las configuraciones como eslint-config-react-app en react-scripts según lo previsto (basado en el comentario). Si el problema persiste después de eso, intentar eliminar la carpeta node_modules y package-lock.json y luego reinstalar las dependencias nuevamente puede funcionar. De lo contrario, actualizar a una versión más reciente de npm podría marcar la diferencia.

Respuesta antigua:

Es probable que tu package.json esté faltando la dependencia entre pares eslint-config-react-app, que incluye la configuración predeterminada de eslint react-app. Necesitarás seguir las instrucciones para instalarla aquí https://www.npmjs.com/package/eslint-config-react-app.

Nota: Aunque esto es create-react-app que lo empaqueta para react-scripts, tu script lint no pudo acceder a react-app.

"eslintConfig": {
      "extends": "react-app"   
}

Acerca de .eslintrc, ya tienes la configuración de ESLint en tu package.json, por lo que deberías estar seguro de eliminar .eslintrc.

Respuesta #2

El problema aquí es con el gestor de paquetes yarn. Debido a que eslint-config-react-app no está directamente en node_modules y está dentro de react-scripts: node_moduleseact-scripts\node_modules, yarn no lo ha cargado correctamente (más información aquí)

Entonces, actualmente, hay 2 opciones para resolver ese problema:

  1. usando npm en lugar de yarn.
  2. instala el paquete eslint-config-react-app además del que tenemos dentro de react-scripts.

Artículos relacionados