由于 ESLint 错误，我的 create-react-app 无法编译

IT技术 reactjs eslint

2021-04-17 06:28:52

我刚刚创建了一个新的模板，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 错误，而没有导致应用程序崩溃。任何人都可以指出我搞砸的地方吗？

谢谢

6个回答

当我使用应用程序创建应用程序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 hooks 运行时，此标志将被忽略，当您尝试提交带有eslint 错误的代码时，这反过来会导致错误。

更新 2：

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

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

安装patch-package和postinstall-postinstall作为 dev 依赖项。
转到node_modules/react-scripts/config/webpack.config.js并进行以下更改
完成编辑后，运行yarn patch-package react-scripts。这将创建一个补丁文件夹，其中包含依赖补丁。
现在，因为我们不想在安装依赖项时每次都这样做。我们将在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。
安装依赖项并启动应用程序。

看起来，eslint 7.0used byreact-scripts:4.0.0以某种方式强制执行更严格的策略，为某些插件抛出错误而不是警告。对我来说，它只是不适用于eslint-airbnb-base，实际上阻止了任何编译，即使是一个很小的no-unused-vars错误。降级到3.4.4似乎是不弹出和自定义 webpack 配置到更深层次的唯一方法

2021-05-25 06:28:52

这是多么可怕的错误啊！！！呃！！

2021-05-26 06:28:52

我也一直无法在 v4.0 中找到解决此问题的方法，因此将降级到 v4.0 之前的版本

2021-06-06 06:28:52

@GettingBetter 这个答案对我有用。stackoverflow.com/a/65216110/2573621

2021-06-14 06:28:52

你是山羊！该环境变量只是起作用了！

2021-06-17 06:28:52

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

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

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

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

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

完美运行，也不影响测试！

2021-06-06 06:28:52

ESLINT_NO_DEV_ERRORS=true非常适合我继续开发，而不会因 lint 错误而导致编译失败。谢谢

2021-06-07 06:28:52

迄今为止发现的最优雅的解决方案

2021-06-08 06:28:52

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

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 输出将不再出现在错误叠加中。仅此一项并不能修复该错误。

另请参阅此处和此处的文档

围绕 react-scripts 的天才开发人员决定一旦CI=true出现警告就将其转化为错误。因此，解决该问题的唯一方法是CI=false用于您的命令或使您的 eslint 运行警告免费。在这里建议 eslint 规则是没有意义的，因为您的代码库或自定义规则集引起的另一个警告可能会触发该问题。

调整您的scripts块package.json：

"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

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

我收到“术语‘CI=false’未被识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，或者如果包含路径，请验证路径是否正确并且再试一次。” 有了这个解决方案。

2021-06-04 06:28:52

你是在windows下吗？你需要运行“SET CI=false”然后..

2021-06-16 06:28:52

对于Next.js

打开next.config.js并启用ignoreDuringBuildseslint 配置中的选项：

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

其它你可能感兴趣的问题

上一篇向子项提供属性时，如何为 React.cloneElement 分配正确的类型？下一篇使用 react-router 登录后自动重定向