在定义之前使用了“反应”

问题描述

我正在使用create-react-app +打字稿+ eslint应用程序，并且在构建过程中出现此类错误：

I am working with create-react-app + typescript + eslint application and during build have such error:

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的某些部分：

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

我尝试过：

• 阅读


• 在.eslintrc.js中禁用@ typescript-eslint / no-use-before-define和no-use-before-define


• 实际上，我完全尝试删除.eslintrc.js，但是有相同的错误。

推荐答案

该错误是由于react-scripts中的 @ typescript-eslint 版本与本地软件包不匹配而发生的。 json -

The bug occurs due to mismatch of @typescript-eslint versions in react-scripts and your local package.json - GitHub issue

您可以降级软件包，直到反应脚本更新其版本。

You can downgrade the packages until react-scripts updates their version.

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

已编辑

与 @ typescript-eslint 的反应脚本版本无关，因为多个人报告了相同的错误而未使用 react-scripts 。

It seems the bug is not related to react-scripts version of @typescript-eslint since multiple people reported the same bug without using react-scripts.

无论如何，解决方法仍然相同-降级为 @ typescript-eslint ，直到修复可用为止。

Anyway, the workaround remains the same - downgrade to the working version of @typescript-eslint until the fix is available.

这篇关于在定义之前使用了“反应”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！