我的create-react-app编译失败，因为ESLint出现错误。

Question

我刚使用 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错误，但不会导致应用程序崩溃。请问有人能指出我哪里出错了吗？

- Ali Aljarah

---

你是想纠正错误还是更改eslintrc中的no-unused-vars设置？无论你尝试了什么，请告诉我。 - David

这是该问题的Github工单链接：https://github.com/facebook/create-react-app/issues/10021 - Thomas Kagan

你找到解决方案了吗？ - Timothy Oliver

@TimothyOliver 是的，我已将其作为回答添加到了这个问题中。谢谢。 - Ali Aljarah

更新到最新版本的craco解决了我的问题。 - tver3305

Answer 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。这会创建一个补丁文件夹，其中包含依赖项补丁。

• 现在，由于我们不想每次安装依赖时都要执行上述操作，因此我们要在 package.json 文件中添加另一个脚本。

  "postinstall":"patch-package"。

以上脚本将在每次安装依赖时运行。请记得将patches文件夹推送到您的仓库，如果你需要这些更改，并在部署应用程序时执行。

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

更新1：

由于目前没有可行的解决方案，必须降级到react-scripts:3.4.4版本。现在，控制台中会抛出错误而不是在浏览器中显示。

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

- Ashfaq nisar

---

我也无法在v4.0中解决这个问题，所以我将降级到v4.0之前的版本。 - Thomas Kagan

看起来 react-scripts:4.0.0 使用的 eslint 7.0 在某种程度上实施了更严格的策略级别，对某些插件抛出错误而不是警告。对于我来说，使用 eslint-airbnb-base 就会出错，甚至一个很小的 no-unused-vars 错误都会阻止任何编译。除非弹出并自定义 webpack 配置到更深的水平，否则降级到 3.4.4 似乎是唯一的解决方法。 - GettingBetter

@GettingBetter 这个答案对我有用。https://dev59.com/AVIG5IYBdhLWcg3wiQ14#65216110 - christo8989

你是最棒的！那个环境变量就这么简单地起作用了！ - smac89

这是一个多么可怕的bug啊！！！呃！！ - Jamie Hutber

仍然存在与react-scripts 5.0的错误。不得不降级到3.4.4。 - mdehghani

Answer 2

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

确保你正在使用VSCode扩展，并且已经安装了eslint作为开发依赖项（以及其他可能需要的插件）。

为了使代码在开发过程中进行linting但不会失败，请将以下内容添加到.env.development中： ESLINT_NO_DEV_ERRORS=true

为了完全禁用生产构建上的eslint，请将以下内容添加到.env.production中： DISABLE_ESLINT_PLUGIN=true

之后，它就不应该再导致任何构建失败。我不明白为什么eslint会导致构建失败。它的存在是为了帮助我们提高代码质量，但不一定要强制执行。

- Thales Kenne

---

ESLINT_NO_DEV_ERRORS=true 对我来说非常完美，使我能够在不因 lint 错误而编译失败的情况下继续开发。谢谢。 - David Tedman-Jones

完美地工作了，而且对测试没有影响！ - Pluto

迄今为止找到的最优雅的解决方案 - dalisoft

Answer 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

- Citizen-Dror

Answer 4

对于 Next.js

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

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

- Hasan Sefa Ozalp

---

这真是太棒了，谢谢！ - Mika

Answer 5

当存在CI=true时，react-scripts周围的开发人员决定将警告转换为错误。因此，唯一修复此问题的方法是在您的命令中使用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

- Henry Ruhs

---

使用此解决方案时，我收到“CI=false”一词未被识别为 cmdlet、function、script 文件或可操作程序的名称。请检查拼写或包含路径的情况，并验证路径是否正确，然后重试。 - Jeff Langston

你使用的是Windows系统吗？那么你需要运行“SET CI=false”命令。 - Henry Ruhs

“env CI=false” 应该成为一个跨平台选项。 - Rohn Adams

有一个名为cross-env的包可以解决这个问题... https://www.npmjs.com/package/cross-env - Henry Ruhs

Answer 6

编译出现问题时，可以通过在.env文件中添加以下内容来解决问题。我遇到了这个问题，并尝试使用以下代码行来解决它。

SKIP_PREFLIGHT_CHECK = true

或者

ESLINT_NO_DEV_ERRORS = true

SKIP_PREFLIGHT_CHECK=true or ESLINT_NO_DEV_ERRORS=true

---

您还可以编辑 package.json 文件。

"start": "ESLINT_NO_DEV_ERRORS='true'  react-scripts start",  
"build": "DISABLE_ESLINT_PLUGIN='true' react-scripts build",

- Masud Rana

Answer 7

暂时的解决办法是，使用 .eslintrc.js 文件，以此来检测当前的 Node 环境并设置相应的规则。例如：

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

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

这样，您无需弹出以修改webpack配置文件以更改规则。

- emab

Answer 8

我曾经遇到过同样的错误，以下是解决方法。

当我想创建一个应用程序时，在终端中除了错误提示外，还有以下建议。

  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的问题。

- Snowcat

Answer 9

将你的 .eslintrc.json 文件中的倒数第三行替换掉。

"no-unused-vars": "error"

使用

"no-unused-vars": "warn"

我预计这个变化会导致警告而不是错误。

别忘了重新启动你的文本编辑器或IDE！

免责声明
根据我从你的问题中所读到的，我相信我的提示应该会有所帮助。 但我自己没有尝试过。

- Henke

---

如果用户想要向您询问澄清问题或提供额外信息，他们可以随时留下评论。您不需要在答案中明确提及这一点，因为这是默认的。 - cigien

Answer 10

当我将create-react-app升级到v4时，看到了数页的eslint问题 -> 错误，阻止了我的应用程序编译。这不是我使用react的fast-refresh所期望的直接体验 :). Eslint 7中规则（和错误级别）的更改肯定是原因。尽管如此，转换过程开始关注以前仅限于我的linter的prettier/prettier问题，这一点仍然不清楚。

更新

有几件事情正在发生。Eslint的更改（以及任何扩展，例如airbnb）可能会动摇我的错误和警告混合，但最相关的可能是：CRA v4不再使用自己的eslint规则，而是使用项目的规则，即编辑器中使用的linting规则。在升级之前，CRA使用项目规则是通过EXTEND_ESLINT启用的。现在，这个注册表已经默认打开，并且在v4中不再是我可以使用env设置的东西（至少在我的经验中是这样）。

无论如何，使应用程序进行转换的快速修复方法如下：

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

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

这使我能够编译应用程序，同时给我时间来处理/优先考虑在这个 fast-refresh、未弹出 CRA、Eslint v7 版本的应用程序中有意义的事情。

- E

- Edmund's Echo