My create-react-app is failing to compile due to ESLint error

I just created a fresh template with create-react-app with react v17 included, and I installed eslint dependencies as I used to before, here's my package.json file

{
  "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"
  }
}

and here's my eslintrc.json: (note that i didn't add all the rules yet)

{
  "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"
  }
}

when I run the app will fail to compile due to this error:

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

I've worked on previous projects and eslint errors were showing in the code without causing the app to crash. can anyone point where I messed up please?

thanks

Solution 1:

I have had the exact same errors when I created app using the create-react-app and setup the eslint for the application.

The eslint errors were showing up in the browser rather than in the console.

Once, I debugged all the dependencies. It seems that the react-scripts was causing the lint errors for me.

The newest version of the react-scripts:"4.0.0" may have some breaking changes which could be causing the eslint to throw the errors in the browser.

Solution:

This issue has been fixed in the react-scipts:"4.0.3" but, the eslint errors present in the project are not converted to warnings by default. You have to create an .env file which should contain a ESLINT_NO_DEV_ERRORS=true flag. Due to this flag, you will receive the eslint errors as warnings and not as errors in the development.

This flag is ignored during production and when they are any git hooks running, which will in turn cause an error when you are trying to commit the code with an eslint error in it.

Update 2:

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

Workaround for this issue until react-scripts:4.0.2 is released:

Install patch-package and postinstall-postinstall as dev dependency .
Go to node_modules/react-scripts/config/webpack.config.js and make the following changes
Once done with the edit,run yarn patch-package react-scripts. This will create a patches folder, with the dependency patch in it.
Now, as we don't want do this every time while installing the dependencies. We are going to add another script to our package.json file.

"postinstall":"patch-package".

This above script will run every time when we install the dependencies. Just keep in mind that you will also have to push packages folder to your repo. If you need the changes, also while deploying the app.

Thanks to @fernandaad for providing this workaround.

Update 1:

Had to downgrade to react-scripts:3.4.4 version because there is no workaround available right now. Now, errors were being thrown in the console rather than in the browser.

Delete the node_modules and package.lock/yarn.lock.
Downgrade react-scripts from 4.0.0 to 3.4.4.
Install the dependencies and start the app.

Solution 2:

I was able to fix it using env variables, since I'm not using webpack.

Make sure you're using the VSCode extension and that you installed eslint as a dev-dependency (as well as any other plugins you might need).

To get your code to lint, but not fail, in development, add this to your .env.development: ESLINT_NO_DEV_ERRORS=true

To completely disable eslint on a production build, add this to your .env.production: DISABLE_ESLINT_PLUGIN=true

After that, it should not fail any build. I don't understand why eslint should fail builds. It's there to help us keep code quality up, but not necessarily enforce it.