【问题标题】：My create-react-app is failing to compile due to ESLint error由于 ESLint 错误，我的 create-react-app 无法编译
【发布时间】：2021-02-07 14:16:00
【问题描述】：

我刚刚创建了一个带有 create-react-app 的新模板，其中包含 react v17，并且我像以前一样安装了 eslint 依赖项，这是我的 package.json 文件

{
  "name": "gym-nation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.8.6",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "node-sass": "^4.14.1",
    "prettier": "^2.1.2",
    "react-app-rewired": "^2.1.6"
  }
}

这是我的 eslintrc.json：（请注意，我还没有添加所有规则）

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["react-app", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "singleQuote": true,
        "editor.formatOnSave": true,
        "arrowParens": "always",
        "jsxSingleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none"
      }
    ],
    "no-unused-vars": "error"
  }
}

当我运行应用程序时会因为这个错误而编译失败：

Line 113:13:  'isLoading' is assigned a value but never used  no-unused-vars

我参与过以前的项目，并且代码中显示了 eslint 错误，而不会导致应用程序崩溃。谁能指出我搞砸的地方？

谢谢

【问题讨论】：

您是要更正错误还是要更改 eslintrc 中的 no-unused-vars 设置？无论您尝试哪种方式，您都尝试过什么？
@David 我在eslintrc 中尝试了no-unused-vars 的warn 选项，一切正常，但问题是现在我看不到代码中的 linting 错误，我必须每次我想看到它们时检查控制台。我需要知道为什么应用程序会因 eslint 错误而崩溃以及如何覆盖它。
这里是这个问题的github票github.com/facebook/create-react-app/issues/10021
您找到解决方案了吗？
@TimothyOliver 是的，我将其添加为这个问题的答案。谢谢。

标签： reactjs eslint

【解决方案1】：

当我使用 create-react-app 创建应用并为应用设置 eslint 时，我遇到了完全相同的错误。

eslint 错误显示在浏览器而不是控制台中。

有一次，我调试了所有依赖项。似乎 react-scripts 导致了我的 lint 错误。

react-scripts:"4.0.0" 的最新版本可能有一些重大更改，可能导致 eslint 在浏览器中抛出错误。

解决方案：

此问题已在 react-scipts:"4.0.3" 中修复，但项目中存在的 eslint 错误默认情况下不会转换为警告。您必须创建一个 .env 文件，其中应包含一个 ESLINT_NO_DEV_ERRORS=true 标志。由于这个标志，您将收到 eslint 错误作为警告，并且不是作为开发中的错误。

此标志在生产过程中被忽略，当它们运行任何 git 挂钩时，当您尝试提交代码时，这又会导致错误 带有 eslint 错误。

更新 2：

活跃问题：https://github.com/facebook/create-react-app/issues/9887

在 react-scripts:4.0.2 发布之前解决此问题：

安装 patch-package 和 postinstall-postinstall 作为开发依赖项。
转到 node_modules/react-scripts/config/webpack.config.js 并进行以下更改
编辑完成后，运行 yarn patch-package react-scripts。这将创建一个 patches 文件夹，其中包含 依赖补丁。
现在，我们在安装依赖项时不想每次都这样做。我们将在 package.json 文件中添加另一个脚本。

"postinstall":"patch-package".

当我们安装依赖项时，上面的脚本每次都会运行。请记住，您还必须将包文件夹推送到您的存储库。如果您需要更改，也可以在部署应用程序时进行。

感谢 @fernandaad 提供此解决方法。

更新 1：

不得不降级到react-scripts:3.4.4 版本，因为目前没有可用的解决方法。现在，错误是在控制台而不是在浏览器中抛出的。

删除 node_modules 和 package.lock/yarn.lock。
将 react-scripts 从 4.0.0 降级到 3.4.4。
安装依赖项并启动应用程序。

【讨论】：

我也无法在 v4.0 中找到解决此问题的方法，因此将降级到 v4.0 之前的版本
看起来react-scripts:4.0.0 使用的eslint 7.0 以某种方式强制执行更严格的策略，对某些插件抛出错误而不是警告。对我来说，它不适用于eslint-airbnb-base，几乎阻止了任何编译，即使是一个很小的no-unused-vars 错误。降级到 3.4.4 似乎是不弹出和自定义 webpack 配置到更深层次的唯一方法
@GettingBetter 这个答案对我有用。 stackoverflow.com/a/65216110/2573621
你是山羊！那个环境变量刚刚起作用！
这是多么可怕的错误啊！！！啊！！

【解决方案2】：

我能够使用环境变量修复它，因为我没有使用 webpack。

确保您使用的是 VSCode 扩展，并且安装了 eslint 作为开发依赖项（以及您可能需要的任何其他插件）。

要让您的代码在开发过程中进行 lint，但不会失败，请将其添加到您的 .env.development： ESLINT_NO_DEV_ERRORS=true

要在生产版本中完全禁用 eslint，请将其添加到您的 .env.production： DISABLE_ESLINT_PLUGIN=true

在那之后，它应该不会失败任何构建。我不明白为什么 eslint 会失败构建。它可以帮助我们保持代码质量，但不一定要强制执行。

【讨论】：

ESLINT_NO_DEV_ERRORS=true 非常适合我继续开发，而不会因 lint 错误而导致编译失败。谢谢
完美运行，也不影响测试！
迄今为止最优雅的解决方案

【解决方案3】：

我花了几个小时才找到可能的解决方案：

1- 解决方法：在 package.json 文件中添加规则

  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "max-len": "warn"
        }
      }
    ]
  },

2- 您可以使用 .eslintrc.js 文件，方法是在根文件夹中添加 .env 文件，内容如下：

DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true

DISABLE_ESLINT_PLUGIN- 将在开发和生产中禁用eslint-webpack-plugin。 - 这是必须的。
ESLINT_NO_DEV_ERRORS - 将在开发过程中将 ESLint 错误转换为警告。因此，ESLint 输出将不再出现在错误覆盖中。仅此一项并不能修复错误。

另见文档here 和here

【讨论】：

【解决方案4】：

react-scripts 周围的天才开发人员决定在出现CI=true 时将警告变为错误。因此，解决这个问题的唯一方法是使用CI=false 作为您的命令或让您的 eslint 运行无警告。没有必要在这里建议 eslint 规则会导致由您的代码库或自定义规则集引起的另一个警告可能会触发该问题。

在package.json 中调整您的scripts 块：

"scripts": {
  "start": "CI=false react-app-rewired start",
  "build": "CI=false react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

或者这样运行：

CI=false npm run start

CI=false npm run build

在 GitHub 上查看相关问题：

https://github.com/facebook/create-react-app/issues/10062

https://github.com/facebook/create-react-app/issues/9887

【讨论】：

我收到“‘CI=false’一词未被识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，或者是否包含路径，验证路径是否正确，然后重试。”使用此解决方案。
你在Windows下吗？你需要运行“SET CI=false”然后..

【解决方案5】：

对于Next.js

打开 next.config.js 并在 eslint 配置中启用 ignoreDuringBuilds 选项：

module.exports = {
  eslint: {
    ignoreDuringBuilds: true
  }
}

【讨论】：

【解决方案6】：

对于临时解决方法，请使用.eslintrc.js，以便您可以检查当前节点环境并相应地设置规则。例如：

const isProd = process.env.NODE_ENV === 'production';
const warnDevErrorProd = isProd ? 2 : 1;

{
  ...
  "rules": {
    ...
    "prettier/prettier": warnDevErrorProd,
    "no-console": warnDevErrorProd,
    ...
  }
  ...
}

这样你不需要弹出来修改你的 webpack 配置来改变那里的规则。

【讨论】：

【解决方案7】：

我有同样的问题

此问题在github 上的 CRA（4.0 版）中有一个未解决的问题

我找到了一个临时解决方案

删除node_modules
将React-Scripts 版本形式4.0.0 更改为3.4.4
将此SKIP_PREFLIGHT_CHECK=true 添加到.env 文件中
运行npm install
希望享受:)

PS : 如果您的项目中不存在 .env 文件，您可以在根文件夹中创建该文件

【讨论】：

【解决方案8】：

当我将我的 create-react-app 升级到 v4 时，看到 eslint 问题页面令人生畏 -> 错误阻止了我的应用程序编译。不是我期望使用 react 的fast-refresh 的直接体验:)。 Eslint 7 中规则（和错误级别）的变化肯定是原因。虽然，转译过程是如何开始关注以前仅限于我的 linter 的 prettier/prettier 问题，但我仍不清楚。

更新

发生了一些事情。 Eslint 更改（以及任何扩展，例如 airbnb）可能会改变我的错误和警告组合，但可能最相关：CRA v4 不再使用自己的 eslint 规则，而是使用项目的规则，即使用的 linting 规则在我的编辑器中。在升级之前，CRA 对项目规则的使用是通过 EXTEND_ESLINT 启用的。这个寄存器现在默认开启，并且不再是我可以在 v4 中使用 env 设置的东西（无论如何根据我的经验）。

无论如何，让应用转译的快速修复如下：

git commit我的最新改动
运行更漂亮的cli：yarn prettier --config ./.prettierrc --write '**/*.{js|jsx}'
一个一个，在我的.eslintrc新建一个条目，设置阻塞错误为'warn'；例如，添加 'no-param-reassign': 'warn'（我经常在 .reduce 例程中做的事情）。

总而言之，这个过程花了我大约 5 分钟。

这让我可以编译应用程序，同时让我有时间处理/优先考虑这个 fast-refresh、非弹出 CRA、Eslint v7 版本的应用程序中有意义的事情。

-E

【讨论】：

【解决方案9】：

您可以在 ESLintPlugin 方法中为您的项目添加两个属性，在 node_modules\react-scripts\config\webpack.config.js 中。

failOnError：假，发出警告：真，

 new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        cache: true,
        failOnError: false,
        emitWarning: true,
        // ESLint class options
        cwd: paths.appPath,

【讨论】：

您不应该只更新 node_modules 文件夹中的配置。每次你npm install时它都会恢复。

【解决方案10】：

我遇到了同样的错误，这对我有用。

当我想创建一个应用程序时，我在终端中收到了以下建议。

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

以上三个我都做了。然后我做了以下-

I uninstalled eslint
npm uninstall -g create-react-app //uninstall create react app
npm install eslint --save-dev //reinstalled eslint
npm install -g yarn //installed yarn because I was using npm
used yarn to install create react app
yarn create-react-app nameofapp //used yarn to create a new app

当我执行 npm start 时，它的工作原理似乎是 yarn 正在努力修补/解决问题。

我不得不在这里进行一些试验和错误，但最终成功了。我不是专家，所以并不真正了解引擎盖下到底发生了什么，但这对我有用，因为 yarn 解决了 eslint 问题。

【讨论】：

【解决方案11】：

由于 eslint-loader 现在已弃用并且 eslint-webpack-plugin 现在用于 create-react-app 检查 docs，我能够通过向 eslint-webpack-plugin 添加两个选项来解决问题

在弹出您的 React 应用程序后，将这些选项添加到 ESLintPlugin 选项中：

      new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false,  <== `This one`
        emitWarning: true,  <== `And this one`
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

【讨论】：

如果你不想弹出你的 react 应用怎么办，因为弹出是一个one way operation
我没有弹出就解决了，我在这个帖子上回答了。它只是 prod 或 dev 的环境变量@ThomasKagan

【解决方案12】：

在 module.rules 中修改以下规则以具有

failOnError: false,
emitWarning: true,

{
          test: /\.(js|mjs|jsx)$/,
          enforce: 'pre',
          use: [
            {
              options: {
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                failOnError: false,
                emitWarning: true,
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
        }

【讨论】：

如果没有 webpack 配置，你将如何使用它？
没想到，我已经弹出了反应脚本。
那么我认为 CI=false 是最好的解决方案。