'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";

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
实际上我尝试删除 .eslintrc.js，但出现了同样的错误。

Answer 1

尝试将 import/resolver 添加到您的 Eslint 设置中：

  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }

也许您也需要安装它：

$ yarn add -D eslint-import-resolver-typescript

如果这不起作用，您可以更改此规则

"@typescript-eslint/no-use-before-define": "off"

像这样：

"no-use-before-define": "off"

Answer 2

这就是我解决问题的方法。

首先，转到 node_modules/react-scripts/config/webpack.config.js 并将缓存更改为 false，因为这将帮助您在更改 eslint 文件时了解哪些有效，哪些无效。 I found it here

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

将 ENV 变量添加到 .env 文件。 More info

 EXTEND_ESLINT=true

从现在开始，CRA 将不得不在构建期间使用本地 eslint 进行 linting，我们可以控制禁用某些规则，在我的例子中是 .eslintrc:

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

Answer 3

这是 ESLINT 中存在的问题。

我解决的方法是将 以下行添加到 ESLINT/rules:

"no-use-before-define": [0],
"@typescript-eslint / no-use-before-define": [1],

Answer 4

错误是由于 react-scripts 中的 @typescript-eslint 版本与您本地的 package.json - GitHub issue

不匹配导致的

您可以降级软件包，直到 react-scripts 更新它们的版本。

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

编辑 2020-09-14

这个错误似乎与 @typescript-eslint 的 react-scripts 版本无关，因为很多人在没有使用 react-scripts.

的情况下报告了同一个错误

无论如何，解决方法保持不变 - 降级到 @typescript-eslint 的工作版本，直到修复可用。

编辑 2020-10-24

react-scripts@4.0.0 已发布并更新了 @typescript-eslint。使用最新版本应该可以解决问题。

编辑 2020-11-04

如果升级软件包后错误仍然存在，很可能是您的 eslint 配置使用了错误的规则。查看进行修复。

Answer 5

尝试使用 Yarn 而不是 NPM（确保删除中间的 node_modules）。

这对我有用。

Answer 6

来自official documentation.

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

Answer 7

（没有足够的代表发表评论）

@sashko 的解决方法似乎有效 - 删除 node_modules 也是必要的。

我错过的一件事是 "^4.0.1" 中的插入符号。版本需要修复没有插入符 ^，这似乎是 @Rolly 遇到的问题。确保它是 4.0.1.

在 react-scripts 更新到 v4 之前只有一个解决方法（我正在使用 create-react-app）

Answer 8

删除 node_modules 文件夹并重新安装它对我有用。我正在使用 yarn 作为包管理器。

Answer 9

我只是想为我补充一点，我做了以下事情。

从 package.json 中删除了所有与 eslint 相关的依赖项，如果它们已经被 react-scripts 包含在 package-lock.json 中（对我来说就是全部）
删除了我的 node_modules 文件夹和 package-lock.json 文件
运行 npm install

完成这些步骤后，我终于消除了错误。我更喜欢删除依赖项而不是降级它们，因为这将有助于避免将来再次发生同样的问题。

Answer 10

这已在 4.4.0 中得到解决。将这些依赖项升级到版本 4.4.0

更新： 这可能适用于某些用例。这解决了我的问题。

"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",

Answer 11

我的解决方法：使用 eslint 6，因为 react-scripts 正在使用强制 React 脚本使用更新的 @typescript-eslint 包作为 repo 的其余部分。我在这里使用 selective resolution

  "resolutions": {
    "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1",
    "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1"
  }

@typescript-eslint 4.x 仍然支持 es6

Answer 12

我从 package.json 中删除了软件包 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser，删除了 node_modules 和 package-lock.json，重新安装的软件包：npm install 错误消失了。

更新

之后 create-react-app 使用他们自己的 @typescript-eslint/eslint-plugin 模块，该模块已被弃用。

Answer 13

在使用 Typescript 和扩展 eslint-config-airbnb-typescript 的 ESLint 配置的 Gatsby 项目开始出现问题后，我来到了这个页面。除了 OP 的错误之外，ESLint 还针对未定义的各种规则给出错误，例如 Definition for rule '@typescript-eslint/no-redeclare' was not found. 和其他一些。

最终的根本问题是 Gatsby 使用的是 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 的相当旧的版本。强制 yarn 仅安装最新版本解决了问题：

// package.json
"resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0"
}

Answer 14

如果您只为 .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"
  ],
}

Answer 15

我从 typescript 项目的 airbnb-base 规则集中得到了这个错误。还扩展 airbnb-typescript（具有正确的打字稿规则）解决了该问题。

Answer 16

如果您使用 Create React App。获取最新版本的 react-scripts 为我解决了这个问题。当前：4.0.3

// Get this specific version:
npm uninstall react-scripts
npm install react-scripts@4.0.3

// Get latest version:
npm uninstall react-scripts
npm install react-scripts

Answer 17

我知道 post 不能直接解决问题，但如果您坚持有关导入的最佳实践，则可以绕过这个问题。尝试准确导入您想要的内容，您也将摆脱此错误。例如：

import { useState, useEffect } from React;
// and then continue with your code

Answer 18

这个答案在 react-native 项目（airbnb 风格指南）

中对我有用

在 .eslintrc.json

airbnb-typescript

"extends": {
  "airbnb-typescript"
}

按ctrl+shift+p 或 cmd+shift+p >Reload window (or simply close and re-open vscode)

'React' 在定义之前被使用

'React' was used before it was defined

typescript

reactjs

eslint

create-react-app

这个答案在 react-native 项目（airbnb 风格指南）