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

问题描述

我正在使用create-react-app +打字稿+ 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，但是有相同的错误。

解决方法

来自official documentation。

cron.schedule('* * * 1 *',function () {//do something })

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

不匹配而发生的

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

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

编辑14/09/2020

该错误似乎与react-scripts的{{1}}版本无关，因为多个人报告了相同的错误，而没有使用@typescript-eslint。

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

编辑24/10/2020

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

编辑2020年4月11日

如果升级软件包后错误仍然存在，则很可能您的eslint配置使用了错误的规则。检出Igor's answer进行修复。

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

首先，转到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 varialbe添加到.env文件。 More info

 EXTEND_ESLINT=true

从现在开始，CRA将必须在构建期间使用本地eslint进行掉毛，并且我们可以控制禁用某些规则，在我的情况下，.eslintrc是这样的：

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

我对此的解决方法：使用eslint 6作为react-scripts正在使用强制react脚本使用更新的@ typescript-eslint软件包作为存储库的其余部分。我在这里使用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

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

信用不足，无法发表评论。

@sashko谢谢您的回答。

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

如果React-scripts已将它们与package-lock.json包含在包中，则从package.json中删除所有与eslint相关的依赖关系（对我来说都是这样）
删除了我的node_modules文件夹和package-lock.json文件
npm安装

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

开始遇到有关使用Typescript和扩展了eslint-config-airbnb-typescript的ESLint配置的Gatsby项目的问题后，我进入了此页面。除了OP的错误外，ESLint还针对未定义的各种规则（例如Definition for rule '@typescript-eslint/no-redeclare' was not found.和其他一些规则）提供了错误。

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

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

尝试将导入/解析器添加到您的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"

这是ESLINT中存在的一个问题。

我解决的方法是将以下行添加到ESLINT /规则：

“定义前无用”：[0]，
“ @ typescript-eslint /定义前无用”：[1]，

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

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

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

如果您使用 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

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

@sashko的变通办法似乎奏效了-还必须删除node_modules。

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

只有一种解决方法，直到react-scripts更新到v4（我正在使用create-react-app）

删除node_modules文件夹并重新安装对我来说是可行的。我使用yarn作为软件包管理器。

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

更新

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

如果仅对.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"
  ],}

尝试使用Yarn而不是NPM（请确保在这两者之间删除node_modules）。

这对我有用。

create-react-app eslint eslint reactjs reactjs reactjs reactjs typescript typescript typescript