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

我使用的是 create-response-app + typecript + eslint 应用程序，在构建过程中出现了这样的错误:

Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

组件中的代码以:

import React from "react";

埃斯林特设置:

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

我试过:

101721 次浏览
小开

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

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

  1. 首先，转到 node _ module/response-script/config/webpack.config.js 并将缓存更改为 false，因为这将帮助您理解什么可以工作，什么不可以，然后更改 eslint 文件。我在这里找到的
 cache: true, // You can set it to false
formatter: require.resolve('react-dev-utils/eslintFormatter'),
  1. 将 ENV 变量添加到.ENV 文件
 EXTEND_ESLINT=true
  1. 从现在开始，CRA 将不得不使用您的本地衬线在您的构建期间，我们有控制禁用一些规则，在我的情况下，在。埃斯林特:
rules: {
"@typescript-eslint/no-use-before-define": "off"
},
小开

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

我解决这个问题的方法是添加 遵循 ESLINT/rules 的下面几行:

“ no-use-before-Definition”: [0] ,
“@typeescript-eslint/no-use-before-Definition”: [1] ,

小开
最佳答案

这个错误是由于反应脚本中的 @typescript-eslint版本与本地 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

react-scripts@4.0.0已经发布了更新的 @typescript-eslint。使用最新的版本应该解决这个问题。

编辑2020-11-04

如果在升级包之后错误仍然存在，那么您的 eslint 配置很可能使用了错误的规则。检查 伊戈尔的回答来修复它。

小开

尝试使用 纱线代替 NPM (确保删除中间的 node_modules)。

这招对我很管用。

小开

来自 正式文件。

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

(没有足够的名声发表评论)

@ sashko 的变通方法似乎有效——删除 node_modules也是必要的。

我漏掉了 "^4.0.1"中的插入符号。版本需要修复 没有插入符号 ^，这似乎是@Rolly 的问题。确保是 4.0.1。

在 react-scripts更新到 v4之前只有一个解决方案(我使用的是 create-react-app)

小开

删除 node_modules文件夹和重新安装它为我工作。我使用 yarn作为包管理器。

小开

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

  1. 如果通过反应脚本已经包含在 package-lock.json中，则从 package.json中移除所有与 eslint 相关的依赖项(对我来说，这就是所有依赖项)
  2. 删除了我的 node_modules文件夹和 package-lock.json文件
  3. 查了 npm install

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

小开

这个问题在4.4.0中已经解决了

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

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

我的解决办法是: 使用 eslint 6作为使用 强制反应脚本使用较新的@typecript-eslint 包作为回购的其余部分。 我用的是 选择性分辨率

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

@typescript-eslint4.x 仍然支持 es6

小开

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

更新

在此之后，create-response-app 使用他们自己的 @typescript-eslint/eslint-plugin模块，这是不推荐的。

小开

在我开始遇到一个使用类型脚本的 Gatsby 项目和一个扩展了 eslint-config-airbnb-typescript的 ESLint 配置的问题之后，我来到了这个页面。除了 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"
}
小开

如果您只是为 .js文件获得此错误，请确保 @typescript-eslint/parser仅用于 Typecript 文件。

. 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"
],
}
小开

我在一个打印项目中从 airbnb-base规则集中得到了这个错误。此外，扩展 airbnb-typescript(具有正确的打印规则)也解决了这个问题。

小开

如果你使用创建反应应用程序。获得最新版本的 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
小开

这个答案在一个本地项目(airbnb 样式指南)中对我很有用

  1. 在 .eslintrc.json中使用 airbnb-typescript扩展您的规则
"extends": {
"airbnb-typescript"
}
  1. 按 ctrl + shift + p 或者 cmd + shift + p > 重新加载窗口(或者简单地关闭并重新打开 vscode)

提交答案