3
votes

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint

Je viens de créer un nouveau modèle avec create-react-app react create-react-app avec react v17 inclus, et j'ai installé les dépendances eslint comme avant, voici mon fichier package.json

Line 113:13:  'isLoading' is assigned a value but never used  no-unused-vars

et voici mon eslintrc.json: (notez que je n'ai pas encore ajouté toutes les règles)

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["react-app", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "singleQuote": true,
        "editor.formatOnSave": true,
        "arrowParens": "always",
        "jsxSingleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none"
      }
    ],
    "no-unused-vars": "error"
  }
}

lorsque je lance l'application, la compilation échoue à cause de cette erreur:

{
  "name": "gym-nation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.8.6",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "node-sass": "^4.14.1",
    "prettier": "^2.1.2",
    "react-app-rewired": "^2.1.6"
  }
}

J'ai travaillé sur des projets précédents et des erreurs eslint apparaissaient dans le code sans provoquer le plantage de l'application. quelqu'un peut-il indiquer où j'ai raté s'il vous plaît?

Merci

reactjs eslint

3 commentaires

Cherchez-vous à corriger l'erreur ou à modifier le paramètre no-unused-vars dans votre eslintrc ? Quoi que vous essayiez, qu'avez-vous essayé?

@David J'ai essayé l'option d' warn pour les no-unused-vars dans eslintrc et tout a bien fonctionné, mais le problème est que maintenant je ne peux pas voir les erreurs de peluchage dans le code et je dois vérifier la console chaque fois que je veux les voir . J'ai besoin de savoir pourquoi l'application plante sur les erreurs eslint et comment puis-je la remplacer.

Voici le ticket github pour ce problème github.com/facebook/create-react-app/issues/10021

4 Réponses :

1
votes

vous pouvez désactiver la règle eslint no-unused-vars ou changer le niveau de règle en warning au lieu d' error .

Plus d'informations ici: https://eslint.org/docs/rules/no-unused-vars

2 commentaires

Je ne veux pas cela, j'ai déjà travaillé sur des projets de réaction et les no-unused-vars et d'autres règles montraient leurs erreurs dans le code et le terminal et l'application fonctionnaient toujours correctement. Je recherche la même solution et s'il existe un moyen de remplacer la configuration de l'application et de la maintenir en fonctionnement même si eslint génère des erreurs

Vérifiez les modifications apportées à la version eslint. Parfois, les règles changent le niveau par défaut de "avertissement" à "erreur" et vice versa.

1
votes

comme eslint-loader est maintenant obsolète et eslint-webpack-plugin est maintenant utilisé dans create-react-app vérifier la documentation , j'ai pu résoudre un problème en ajoutant deux options au eslint-webpack-plugin

après avoir éjecté votre application ESLintPlugin , ajoutez ces options aux options ESLintPlugin :

1 commentaires

Que faire si vous ne souhaitez pas éjecter votre application React car l'éjection est une opération à sens unique

1
votes

J'ai eu exactement les mêmes erreurs lorsque j'ai créé l'application à l'aide de create-react-app react create-react-app et configuré l'eslint pour l'application.

Les erreurs eslint apparaissaient dans le navigateur plutôt que dans la console .

Une fois, j'ai débogué toutes les dépendances. Il semble que les react-scripts étaient à l'origine des erreurs de charpie pour moi.

La dernière version des react-scripts:"4.0.0" peut avoir des changements de rupture qui pourraient amener eslint à lancer des erreurs dans le navigateur.

Donc, je viens de passer à react-scripts:3.4.4 version react-scripts:3.4.4 . Désormais, des erreurs étaient lancées dans la console plutôt que dans le navigateur.

Supprimez les modules node_modules et package.lock / yarn.lock.
Rétrograder les scripts de réaction de 4.0.0 à 3.4.4.
Installez les dépendances et démarrez l'application.

Problème actif: https://github.com/facebook/create-react-app/issues/10021

2 commentaires

J'ai également été incapable de trouver une solution à ce problème dans la v4.0 et je vais donc passer à une version antérieure à la v4.0

Cela ressemble à eslint 7.0 utilisé par eslint 7.0 react-scripts:4.0.0 applique en quelque sorte un niveau de politique plus strict, lançant des erreurs plutôt que des avertissements pour certains plugins. Pour moi, cela ne fonctionnerait tout simplement pas avec eslint-airbnb-base , bloquant pratiquement toute compilation, même sur une petite erreur de no-unused-vars . La mise à niveau vers 3.4.4 semble être le seul moyen sans éjecter et personnaliser la configuration du pack Web à un niveau plus profond

0
votes

Lorsque j'ai mis à niveau mon application create-react-app vers la v4, il était intimidant de voir des pages de problèmes d'eslint -> des erreurs empêchant la compilation de mon application. Le changement des règles (et des niveaux d'erreur) dans Eslint 7 en est sûrement la cause.

Le correctif pour me donner le temps de travailler dessus:

Ran plus joli --écrire pour résoudre les problèmes de formatage que je n'avais pas résolus au fil du temps
Mise à jour des entrées de mes règles .eslintrc pour inclure quelle que soit la cause de l'erreur; par exemple, ajout de 'no-param-reassign': 'warn' (quelque chose que je fais souvent dans mes routines .reduce ).

Cela m'a amené à un endroit où je pourrais compiler l'application tout en me laissant le temps de travailler / hiérarchiser ce qui a du sens dans la prochaine version d'Eslint.

- E

0 commentaires