'React' 在定义之前就被使用了

Question

我正在使用 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 设置：

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

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 ，但有同样的错误。

Answer 1

来自官方文档。

"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 2

该错误是由于@typescript-eslintreact-scripts 中的版本与您的本地版本不匹配造成的package.json- GitHub 问题

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

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

编辑 2020-09-14

似乎该错误与 的react-scripts版本无关，@typescript-eslint因为多人报告了相同的错误而没有使用react-scripts.

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

编辑 2020-10-24

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

编辑 2020-11-04

如果升级软件包后错误仍然存​​在，很可能是您的 eslint 配置使用了错误的规则。查看伊戈尔的答案来解决它。

Answer 3

如果您只为.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"
  ],
}

Answer 4

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

1. 首先，转到 node_modules/react-scripts/config/webpack.config.js 并将缓存更改为 false，因为这将帮助您了解更改 eslint 文件后哪些有效，哪些无效。我在这里找到了

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

2. 将 ENV 变量添加到 .env 文件。更多信息

 EXTEND_ESLINT=true

3. 从现在开始，CRA 将不得不在您的构建过程中使用您的本地 eslint 进行 linting，我们可以控制禁用一些规则，在我的情况下是 .eslintrc：

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

Answer 5

在我开始遇到使用 Typescript 的 Gatsby 项目和扩展eslint-config-airbnb-typescript. 除了 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"
}

Answer 6

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