'React' a été utilisé avant d'être défini

Question

Je travaille avec l'application create-react-app + typescript + eslint et pendant la construction j'ai une telle erreur:

Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

Le code de mon composant commence par:

import React from "react";

Paramètres Eslint:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/triple-slash-reference": 0,
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  },
};

Une partie de package.json:

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.0",
  "@typescript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

J'ai essayé:

• Lis https://github.com/typescript-eslint/typescript-eslint/issues/2502
• Désactivez @ typescript-eslint / no-use-before-define et no-use-before-define dans .eslintrc.js
• En fait, j'ai essayé de supprimer .eslintrc.js du tout, mais j'ai eu la même erreur.

Answer 1

Le bogue se produit en raison d'une incompatibilité des @typescript-eslintversions dans les scripts de réaction et votre problème local package.json- GitHub

Vous pouvez rétrograder les packages jusqu'à ce que react-scriptsleur version soit mise à jour.

    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",

MODIFIER 14/09/2020

Il semble que le bogue ne soit pas lié à la react-scriptsversion de @typescript-eslintpuisque plusieurs personnes ont signalé le même bogue sans utiliser react-scripts.

Quoi qu'il en soit, la solution de contournement reste la même: rétrograder à la version de travail de @typescript-eslintjusqu'à ce que le correctif soit disponible.

MODIFIER 24/10/2020

[email protected]a été publié avec mise à jour @typescript-eslint. L'utilisation de la dernière version devrait résoudre le problème.

MODIFIER 11/04/2020

Si, après la mise à niveau des packages, l'erreur persiste, il est fort probable que votre configuration eslint utilise la mauvaise règle. Découvrez la réponse d' Igor pour y remédier.

Answer 2

De la documentation officielle .

"rules": {
  // note you must disable the base rule as it can report incorrect errors
  "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]
}

Answer 3

C'est ainsi que j'ai résolu mon problème.

1. Tout d'abord, allez dans node_modules / react-scripts / config / webpack.config.js et changez le cache en false, car cela vous aidera à comprendre ce qui fonctionne et ce qui ne fonctionne pas alors vous changez le fichier eslint. Je l'ai trouvé ici

 cache: true, // You can set it to false
 formatter: require.resolve('react-dev-utils/eslintFormatter'),

1. Ajoutez ENV varialbe au fichier .env. Plus d'informations

 EXTEND_ESLINT=true

1. À partir de maintenant, l'ARC devra utiliser votre eslint local pour le peluchage lors de votre construction et nous avons le contrôle pour désactiver certaines règles, dans mon cas en .eslintrc:

rules: {
    "@typescript-eslint/no-use-before-define": "off"
},

Answer 4

Ma solution pour cela: utiliser eslint 6 comme react-scripts utilise des scripts Force react pour utiliser les packages @ typescript-eslint plus récents comme le reste du dépôt. J'utilise la résolution sélective ici

  "resolutions": {
    "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1",
    "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1"
  }

@typescript-eslint 4.x prend toujours en charge es6

Answer 5

Pas assez de crédit pour commenter.

@sashko merci pour vos réponses.

Je voulais juste ajouter que pour moi, j'ai fait ce qui suit.

1. Suppression de toutes les dépendances liées à eslint de package.json si elles étaient déjà incluses dans package-lock.json par react-scripts (pour moi, c'était toutes)
2. J'ai supprimé mon dossier node_modules et mon fichier package-lock.json
3. npm installer

Après avoir terminé ces étapes, cette erreur a finalement disparu. Je préfère supprimer les dépendances plutôt que de les déclasser, car cela aidera à éviter que le même problème ne se reproduise à l'avenir.

Answer 6

Essayez d'ajouter l'importation / résolution à vos Eslintparamètres:

  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }

Vous devrez peut-être aussi l'installer:

$ yarn add -D eslint-import-resolver-typescript

Si cela ne fonctionne pas, vous pouvez modifier cette règle

"@typescript-eslint/no-use-before-define": "off"

comme ça:

"no-use-before-define": "off"

Answer 7

C'est un problème présent dans ESLINT.

La façon dont je résolve est d'ajouter les lignes suivantes aux règles ESLINT / :

"no-use-before-define": [0],
"@ typescript-eslint / no-use-before-define": [1],

Answer 8

J'ai atterri sur cette page après avoir commencé à avoir des problèmes avec un projet Gatsby qui utilisait Typescript et une configuration ESLint qui s'étendait eslint-config-airbnb-typescript. En plus de l'erreur d'OP, ESLint donnait également des erreurs sur diverses règles non définies, comme Definition for rule '@typescript-eslint/no-redeclare' was not found.et quelques autres.

Le problème sous-jacent a finalement été que Gatsby utilisait des versions assez anciennes des deux @typescript-eslint/eslint-pluginet @typescript-eslint/parser. Forcer yarnà installer uniquement des versions à jour a résolu le problème:

// package.json
"resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0"
}

Answer 9

(pas assez de représentants pour commenter)

La solution de contournement de @ sashko semble fonctionner - la suppression node_modulesétait également nécessaire.

Une chose qui m'a manqué était le caret "^4.0.1". La version doit être corrigée sans le ^signe d'insertion, ce qui semble être le problème rencontré par @Rolly. Assurez-vous que c'est 4.0.1.

Seulement une solution de contournement jusqu'à la react-scriptsmise à jour de la v4 (j'utilise create-react-app)

Answer 10

supprimer le node_modulesdossier et le réinstaller a fonctionné pour moi. J'utilise yarncomme gestionnaire de paquets.

Answer 11

Ce problème a été résolu dans la version 4.4.0. Mettre à niveau ces dépendances vers la version 4.4.0

Mise à jour: cela peut fonctionner pour certains cas d'utilisation. Cela a résolu mon problème.

"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
   

Answer 12

J'ai supprimé des packages @typescript-eslint/eslint-pluginet @typescript-eslint/parserde mes packages package.json, supprimés node_moduleset package-lock.jsonréinstallés: npm install l'erreur a disparu.

METTRE À JOUR

Après cela, create-react-app utilise son propre @typescript-eslint/eslint-pluginmodule qui est obsolète.

Answer 13

Si vous n'obtenez cette erreur que pour les .jsfichiers, assurez-vous qu'elle @typescript-eslint/parserest utilisée exclusivement sur les fichiers Typescript.

.eslintrc.json (abrégé)

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@typescript-eslint"],
      "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
      },
    }
  ],
  // WRONG: Do not use @typescript-eslint/parser on JS files
  // "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    // "@typescript-eslint"
  ],
}