Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reactjs

eslint

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?

like image 789
ali hussein Avatar asked Oct 24 '20 21:10

ali hussein


People also ask

How do I disable ESLint in Create react app?

As of react-scripts v4. 0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your . env file, or by prefixing your scripts in your package.

Do you need to install ESLint With create react app?

Note, ESLint is installed with create-react-app, so you don't need to explicitly install it. Then install the packages for Airbnb config. This command will work for Yarn or NPM.

Does create react app use ESLint?

Because Create React App comes with ESLint already integrated. They use their own sharable ESLint configuration and this can be found under the eslintConfig object in package.


1 Answers

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 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.

  1. Delete the node_modules and package.lock/yarn.lock.
  2. Downgrade react-scripts from 4.0.0 to 3.4.4.
  3. Install the dependencies and start the app.
like image 181
Ashfaq nisar Avatar answered Oct 08 '22 21:10

Ashfaq nisar