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

标签 reactjs typescript create-react-app eslint

我正在使用 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 issue
    您可以将软件包降级至 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's answer修复它。

    关于reactjs - 'React' 在定义之前就被使用了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63818415/

    相关文章:

    reactjs - 我如何传递参数来使用react?

    javascript - 在 React 中使用 Enter 提交输入字段?

    reactjs - Redux 工具包和 createAsyncThunk 不适用于 axios 实例

    javascript - NextJS : getStaticProps revalidate not working

    typescript :类方法可以是另一个方法的装饰器吗?

    javascript - 如何访问Angular 2中VideoJs函数中的成员变量和方法?

    javascript - Angular 2 中消费者如何提供组件构造函数参数?

    reactjs - Jest 测试仅在覆盖范围内失败

    javascript - 为什么我的 React 组件在所有路由中渲染?

    reactjs - 无法使用在渲染函数外声明的变量