reactjs - 在定義之前使用了 'React'

我正在使用 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，但仍然出現相同的錯誤。

答案＃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"]
}

答案＃2

此錯誤是由於 react-scripts 與您本地的 package.json 中 @typescript-eslint 版本不匹配所引起的 - 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

[email 已經發布了更新的 @typescript-eslint。使用最新版本應該可以解決這個問題。

編輯 2020-11-04

如果在升級套件後錯誤仍然存在，很可能是你的 eslint 配置使用了錯誤的規則。查看 Igor 的回答以修復它。

答案＃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"
  ],
}

答案＃4

那就是我解決問題的方式。

首先，前往 node_modules/react-scripts/config/webpack.config.js 並將 cache 改為 false，因為這會幫助你在更改 eslint 文件時了解哪些有效，哪些無效。我是在這裡找到的

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

將環境變數添加到 .env 文件。更多資訊

 EXTEND_ESLINT=true

從現在起，CRA 在構建期間將必須使用您本地的 eslint 進行代碼檢查，我們可以控制禁用某些規則，以我的情況為例，在 .eslintrc 中：

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