"React" è stato utilizzato prima di essere definito

Question

Sto lavorando con create-react-app + typescript + eslint application e durante la build ho un tale errore:

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

Il codice nel mio componente inizia con:

import React from "react";

Impostazioni di 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"
  },
};

Alcune parti di 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",
  ...
}

Provai:

• Leggere https://github.com/typescript-eslint/typescript-eslint/issues/2502
• Disabilita @ typescript-eslint / no-use-before-define e no-use-before-define in .eslintrc.js
• In realtà ho provato a eliminare .eslintrc.js del tutto, ma ho avuto lo stesso errore.

Answer 1

Il bug si verifica a causa di mancata corrispondenza delle @typescript-eslintversioni in reagiscono-scripts e il vostro locale package.json- problema GitHub

È possibile eseguire il downgrade dei pacchetti finché non ne react-scriptsaggiorna la versione.

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

EDIT 14/09/2020

Sembra che il bug non sia correlato alla react-scriptsversione di @typescript-eslintpoiché più persone hanno segnalato lo stesso bug senza utilizzare react-scripts.

Ad ogni modo, la soluzione alternativa rimane la stessa: esegui il downgrade alla versione funzionante di @typescript-eslintfino a quando la correzione non è disponibile.

MODIFICA 24/10/2020

[email protected]è stato pubblicato con aggiornato @typescript-eslint. L'utilizzo della versione più recente dovrebbe risolvere il problema.

EDIT 04/11/2020

Se dopo aver aggiornato i pacchetti l'errore è ancora presente, molto probabilmente la tua configurazione di eslint utilizza la regola sbagliata. Controlla la risposta di Igor per risolverlo.

Answer 2

Dalla documentazione ufficiale .

"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

È così che ho risolto il mio problema.

1. Prima di tutto, vai su node_modules / react-scripts / config / webpack.config.js e cambia la cache in false, perché questo ti aiuterà a capire cosa funziona e cosa no, quindi cambierai il file eslint. L'ho trovato qui

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

1. Aggiungi varialbe ENV al file .env. Ulteriori informazioni

 EXTEND_ESLINT=true

1. D'ora in poi CRA dovrà utilizzare il tuo eslint locale per il linting durante la tua build e abbiamo il controllo per disabilitare alcune regole, nel mio caso in .eslintrc:

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

Answer 4

La mia soluzione per questo: usare eslint 6 come react-scripts sta usando Force react scripts per usare i nuovi pacchetti @ typescript-eslint come il resto del repository. Sto usando la risoluzione selettiva qui

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

@typescript-eslint 4.x supporta ancora es6

Answer 5

Non abbastanza credito per commentare.

@sashko grazie per le tue risposte.

Volevo solo aggiungerlo per me, ho fatto quanto segue.

1. Rimosse tutte le dipendenze relative a eslint da package.json se erano già incluse in package-lock.json da react-scripts (per me erano tutte)
2. Eliminato la mia cartella node_modules e il file package-lock.json
3. npm install

Dopo aver completato questi passaggi, finalmente l'errore scompare. Preferisco rimuovere le dipendenze piuttosto che declassarle poiché ciò aiuterà a evitare che lo stesso problema si ripeta in futuro.

Answer 6

Prova ad aggiungere import / resolver alle tue Eslintimpostazioni:

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

Forse dovrai installarlo anche tu:

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

Se non funziona, potresti cambiare questa regola

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

come questo:

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

Answer 7

È un problema presente in ESLINT.

Il modo in cui risolvo è aggiungere le seguenti righe a ESLINT / regole :

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

Answer 8

Sono arrivato su questa pagina dopo aver iniziato a riscontrare problemi con un progetto Gatsby che utilizzava Typescript e una configurazione ESLint estesa eslint-config-airbnb-typescript. Oltre all'errore di OP, ESLint dava anche errori su varie regole non definite, come Definition for rule '@typescript-eslint/no-redeclare' was not found.e poche altre.

Il problema di fondo finì per essere che Gatsby stava usando versioni abbastanza vecchie di entrambi @typescript-eslint/eslint-plugine @typescript-eslint/parser. Costringere yarna installare solo versioni aggiornate ha risolto il problema:

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

Answer 9

(non abbastanza rappresentante per commentare)

La soluzione alternativa di @ sashko sembra funzionare - node_modulesera necessaria anche l' eliminazione .

Una cosa che mi mancava era il cursore "^4.0.1". La versione deve essere corretta senza il cursore ^, che sembra essere il problema che sta avendo @Rolly. Assicurati che lo sia 4.0.1.

Solo una soluzione alternativa fino react-scriptsagli aggiornamenti alla v4 (che sto usando create-react-app)

Answer 10

l'eliminazione della node_modulescartella e la reinstallazione ha funzionato per me. Sto usando yarncome gestore di pacchetti.

Answer 11

Questo problema è stato risolto nella 4.4.0. Aggiorna queste dipendenze alla versione 4.4.0

Aggiornamento: potrebbe funzionare per alcuni casi d'uso. Questo ha risolto il mio problema.

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

Answer 12

Ho eliminato i pacchetti @typescript-eslint/eslint-plugine @typescript-eslint/parserdai miei pacchetti package.json, cancellati node_modulese package-lock.jsonreinstallati: npm installl'errore è scomparso.

AGGIORNARE

Dopodiché, create-react-app utilizza il proprio @typescript-eslint/eslint-pluginmodulo che è deprecato.

Answer 13

Se ricevi questo errore solo per i .jsfile, assicurati che @typescript-eslint/parservenga utilizzato esclusivamente su file Typescript.

.eslintrc.json (abbreviato)

{
  "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"
  ],
}