在定义之前使用了“React”答案

【问题标题】：'React' was used before it was defined在定义之前使用了“React”
【发布时间】：2020-12-28 06:52:04
【问题描述】：

我正在使用 create-react-app + typescript + eslint 应用程序，并且在构建过程中出现这样的错误：

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

我的组件中的代码以：

import React from "react";

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

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

我试过了：

阅读https://github.com/typescript-eslint/typescript-eslint/issues/2502
在 .eslintrc.js 中禁用 @typescript-eslint/no-use-before-define 和 no-use-before-define
实际上我试图删除 .eslintrc.js ，但有同样的错误。

【问题讨论】：

标签： reactjs typescript create-react-app eslint

【解决方案1】：

我知道这篇文章不能直接解决问题，但如果您坚持有关导入的最佳做法，则可以绕过此问题。尝试准确导入您想要的内容，您也将摆脱此错误。例如：

import { useState, useEffect } from React;
// and then continue with your code

【讨论】：

【解决方案2】：

我从打字稿项目中的airbnb-base 规则集中得到了这个错误。扩展airbnb-typescript（具有正确的打字稿规则）也解决了这个问题。

【讨论】：

【解决方案3】：

该错误是由于 react-scripts 中的 @typescript-eslint 版本与您本地的 package.json - GitHub issue 不匹配而发生的

您可以降级软件包，直到 react-scripts 更新其版本。

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

编辑 2020-09-14

似乎该错误与@typescript-eslint 的react-scripts 版本无关，因为多个人在没有使用react-scripts 的情况下报告了相同的错误。

无论如何，解决方法保持不变 - 降级到 @typescript-eslint 的工作版本，直到修复可用。

编辑 2020-10-24

react-scripts@4.0.0 已发布，更新后的@typescript-eslint。使用最新版本应该可以解决问题。

编辑 2020-11-04

如果升级软件包后错误仍然存在，很可能你的 eslint 配置使用了错误的规则。查看Igor's answer 进行修复。

【讨论】：

对我不起作用。 “反应”：“^16.13.1”，“打字稿”：“~3.7.2”，“@typescript-eslint/eslint-plugin”：“^4.0.1”，“@typescript-eslint/parser”：“ ^4.0.1”。与帖子相同的错误。
您是否尝试过删除node_modules 并重新安装软件包？
我做了，但警告仍然存在。
在您的package.json 中指定不带插入符号的typescript-eslint 版本^，因为它将安装最新的次要版本，而不是4.0.1。
升级 react-scripts 到 v4.0.0（next 在撰写本文时）解决了这个问题。 npm i react-scripts@next.

【解决方案4】：

如果你使用 Create React App。获取最新版本的 react-scripts 为我解决了这个问题。目前：4.0.3

// Get this specific version:
npm uninstall react-scripts
npm install react-scripts@4.0.3

// Get latest version:
npm uninstall react-scripts
npm install react-scripts

【讨论】：

【解决方案5】：

如果您只收到 .js 文件的此错误，请确保 @typescript-eslint/parser 仅用于 Typescript 文件。

.eslintrc.json（缩写）

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

【讨论】：

我不得不把它放在覆盖中："parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint/eslint-plugin"],

【解决方案6】：

在我开始遇到使用 Typescript 和扩展 eslint-config-airbnb-typescript 的 ESLint 配置的 Gatsby 项目时，我进入了这个页面。除了 OP 的错误之外，ESLint 还给出了各种未定义规则的错误，例如 Definition for rule '@typescript-eslint/no-redeclare' was not found. 和其他一些。

根本问题最终是 Gatsby 使用了相当旧的 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 版本。强制yarn 只安装最新版本解决了这个问题：

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

【讨论】：

这救了我谢谢。在进行了一些挖掘之后，似乎 gatsby 使用 ^2.24.0 版本安装了这两个库，该版本非常旧，并且由于某种原因它们被使用。令人沮丧的是，在它说的文档中，只需制作自己的 .eslintrc 并且一切都很好，然后它们包含自己的解析器和可以使用的规则集。

【解决方案7】：

我从我的package.json 中删除了包@typescript-eslint/eslint-plugin 和@typescript-eslint/parser，删除了node_modules 和package-lock.json，重新安装的软件包：npm install 错误消失了。

更新

之后 create-react-app 使用他们自己的 @typescript-eslint/eslint-plugin 模块，该模块已被弃用。

【讨论】：

【解决方案8】：

这已在 4.4.0 中解决。将这些依赖项升级到版本 4.4.0

更新：这可能适用于某些用例。这解决了我的问题。

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

【讨论】：

不是。我测试了 4.4.0 和 4.4.1
当我在"resolutions" 中设置这些时，这对我有用。在我的package.json 中。

【解决方案9】：

我的解决方法：使用 eslint 6 作为 react-scripts 正在使用强制反应脚本使用更新的 @typescript-eslint 包作为 repo 的其余部分。我在这里使用selective resolution

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

@typescript-eslint 4.x 仍然支持 es6

【讨论】：

对我来说，不仅仅是 react-scripts 保留了一个过时版本的 @typescript-eslint 作为依赖项。我用yarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser发现了其他罪魁祸首

【解决方案10】：

信用不足，无法发表评论。

@sashko 谢谢你的回答。

我只是想为我添加，我做了以下。

如果 react-scripts 已经将所有与 eslint 相关的依赖项包含在 package-lock.json 中，则从 package.json 中删除它们（对我来说就是全部）
删除了我的 node_modules 文件夹和 package-lock.json 文件
npm 安装

完成这些步骤后，我终于消除了该错误。我更喜欢删除依赖项而不是降级它们，因为这将有助于避免将来再次发生同样的问题。

【讨论】：

这是唯一对我有用的东西 - 谢谢！

【解决方案11】：

删除node_modules 文件夹并重新安装它对我有用。我使用yarn 作为包管理器。

【讨论】：

【解决方案12】：

（没有足够的代表发表评论）

@sashko 的解决方法似乎有效 - 删除 node_modules 也是必要的。

我错过了"^4.0.1" 中的插入符号。该版本需要在没有插入符号^ 的情况下进行修复，这似乎是@Rolly 遇到的问题。确保它是4.0.1。

只有在 react-scripts 更新到 v4 之前的解决方法（我正在使用 create-react-app）

【讨论】：

【解决方案13】：

来自official documentation。

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

【讨论】：

另见 typescript-eslint 维护者的此建议 github.com/typescript-eslint/typescript-eslint/issues/…
不起作用。我正在使用@typescript-eslint 4.22。
上面提到的规则设置对我有用。关闭第一个有问题的规则，然后打开第二个可以正常工作的规则。
将"no-use-before-define": "off", 添加到我的.eslintrc.json 规则对我来说是这样。

【解决方案14】：

尝试使用 Yarn 而不是 NPM（确保在两者之间删除您的 node_modules）。

这对我有用。

【讨论】：

【解决方案15】：

这是 ESLINT 中存在的问题。

我解决的方法是将以下几行添加到 ESLINT/rules：

“在定义之前不使用”：[0]，
"@ typescript-eslint / no-use-before-define": [1],

【讨论】：

【解决方案16】：

这就是我解决问题的方法。

首先，转到 node_modules/react-scripts/config/webpack.config.js 并将缓存更改为 false，因为这将帮助您了解更改 eslint 文件时哪些有效，哪些无效。 I found it here

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

将 ENV 变量添加到 .env 文件。 More info

 EXTEND_ESLINT=true

从现在开始，CRA 将不得不在您的构建过程中使用您的本地 eslint 进行 linting，并且我们可以控制禁用某些规则，在我的例子中是 .eslintrc：

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

【讨论】：

小心直接修改它，因为它会被 yarn/npm 安装覆盖。我建议通过 craco 对 webpack.config.js 进行修改：github.com/gsoft-inc/craco

【解决方案17】：

尝试将导入/解析器添加到您的 Eslint 设置中：

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

也许你也需要安装它：

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

如果这不起作用，您可以更改此规则

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

像这样：

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

【讨论】：