Vyhledávání na webu

reactjs - 'React' byl použit dříve, než byl definován

Pracuji s aplikací create-react-app + typescript + eslint a během sestavování se vyskytla tato chyba:

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

Kód v mé komponentě začíná takto:

import React from "react";

Nastavení 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"
  },
};

Některá část souboru 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",
  ...
}

Zkoušel jsem:

  • Přečtěte si https://github.com/typescript-eslint/typescript-eslint/issues/2502
  • Zakázat @typescript-eslint/no-use-before-define a no-use-before-define v .eslintrc.js
  • Vlastně jsem se pokusil odstranit soubor .eslintrc.js úplně, ale měl jsem stejnou chybu.

Odpověď č. 1

Z oficiální dokumentace.

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

Odpověď č. 2

Chyba nastává kvůli neshodě verzí @typescript-eslint v react-scripts a vašem lokálním package.json - GitHub problém

Můžete snížit verze balíčků, dokud react-scripts neaktualizuje svou verzi.

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

EDIT 2020-09-14

Zdá se, že chyba nesouvisí s verzí react-scripts @typescript-eslint, protože více lidí nahlásilo stejnou chybu, aniž by používali react-scripts.

Každopádně obejití zůstává stejné - downgrade na funkční verzi @typescript-eslint, dokud nebude oprava k dispozici.

EDIT 24.10.2020

[email  byl publikován s aktualizovaným @typescript-eslint. Použití nejnovější verze by mělo problém vyřešit.

EDIT 2020-11-04

Pokud po aktualizaci balíčků chyba stále přetrvává, s největší pravděpodobností vaše konfigurace eslint používá špatné pravidlo. Podívejte se na Igorovu odpověď, jak to opravit.

Odpověď č. 3

Pokud se vám tato chyba zobrazuje pouze u souborů .js, ujistěte se, že @typescript-eslint/parser se používá výhradně u souborů TypeScript.

.eslintrc.json (zkráceně)

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

Odpověď č. 4

Tak jsem vyřešil svůj problém.

  1. Nejprve přejděte do node_modules/react-scripts/config/webpack.config.js a změňte cache na false, protože vám to pomůže pochopit, co funguje a co ne, když pak měníte soubor eslint. Našel jsem to zde
 cache: true, // You can set it to false
 formatter: require.resolve('react-dev-utils/eslintFormatter'),
  1. Přidejte proměnnou ENV do souboru .env. Více informací
 EXTEND_ESLINT=true
  1. Od teď bude CRA muset pro lintování během vašeho buildu používat váš lokální eslint a my máme možnost některá pravidla zakázat, v mém případě v .eslintrc:
rules: {
    "@typescript-eslint/no-use-before-define": "off"
},

Související články