[解決済み] 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を全く削除しようとしたのですが、同じエラーが出てしまいました。

解決方法は？

の不一致により発生します。 @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を編集

[email protected] を更新して公開しました。 @typescript-eslint . 最新版を使用することで、問題を解決できるはずです。

2020-11-04を編集

パッケージをアップグレードしてもエラーが出る場合は、eslintの設定に間違ったルールが使われている可能性が高いです。以下の項目をチェックしてみてください。 イゴール氏の回答 をクリックすると修正できます。