在定义之前使用了“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";

埃斯林特设置：

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

原文由 Alexey Nazarov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该错误是由于 @typescript-eslint react-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 配置使用了错误的规则。查看 Igor 的答案 以修复它。

原文由 sashko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

来自 官方文档。

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

原文由 igor 发布，翻译遵循 CC BY-SA 4.0 许可协议