{"id":616,"hash":"da99b832f4d718374620e3843aacee8d957afaee89f9b43e9eac128e642d3386","pattern":"My create-react-app is failing to compile due to ESLint error","full_message":"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\n\n{\n  \"name\": \"gym-nation\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.11.5\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\",\n    \"axios\": \"^0.21.0\",\n    \"classnames\": \"^2.2.6\",\n    \"moment\": \"^2.29.1\",\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-helmet\": \"^6.1.0\",\n    \"react-intl\": \"^5.8.6\",\n    \"react-redux\": \"^7.2.1\",\n    \"react-router\": \"^5.2.0\",\n    \"react-router-dom\": \"^5.2.0\",\n    \"react-scripts\": \"4.0.0\",\n    \"redux\": \"^4.0.5\",\n    \"redux-thunk\": \"^2.3.0\",\n    \"web-vitals\": \"^0.2.4\"\n  },\n  \"scripts\": {\n    \"start\": \"react-app-rewired start\",\n    \"build\": \"react-app-rewired build\",\n    \"test\": \"react-app-rewired test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@typescript-eslint/eslint-plugin\": \"^4.5.0\",\n    \"@typescript-eslint/parser\": \"^4.5.0\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"eslint\": \"^7.12.0\",\n    \"eslint-config-airbnb\": \"^18.2.0\",\n    \"eslint-config-prettier\": \"^6.14.0\",\n    \"eslint-config-react-app\": \"^6.0.0\",\n    \"eslint-plugin-flowtype\": \"^5.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jest\": \"^24.1.0\",\n    \"eslint-plugin-jsx-a11y\": \"^6.3.1\",\n    \"eslint-plugin-prettier\": \"^3.1.4\",\n    \"eslint-plugin-react\": \"^7.21.5\",\n    \"eslint-plugin-react-hooks\": \"^4.2.0\",\n    \"eslint-plugin-testing-library\": \"^3.9.2\",\n    \"node-sass\": \"^4.14.1\",\n    \"prettier\": \"^2.1.2\",\n    \"react-app-rewired\": \"^2.1.6\"\n  }\n}\n\nand here's my eslintrc.json: (note that i didn't add all the rules yet)\n\n{\n  \"env\": {\n    \"browser\": true,\n    \"es2021\": true\n  },\n  \"extends\": [\"react-app\", \"prettier\"],\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"ecmaVersion\": 12,\n    \"sourceType\": \"module\"\n  },\n  \"plugins\": [\"react\", \"prettier\"],\n  \"rules\": {\n    \"prettier/prettier\": [\n      \"error\",\n      {\n        \"printWidth\": 140,\n        \"singleQuote\": true,\n        \"editor.formatOnSave\": true,\n        \"arrowParens\": \"always\",\n        \"jsxSingleQuote\": true,\n        \"tabWidth\": 2,\n        \"trailingComma\": \"none\"\n      }\n    ],\n    \"no-unused-vars\": \"error\"\n  }\n}\n\nwhen I run the app will fail to compile due to this error:\n\nLine 113:13:  'isLoading' is assigned a value but never used  no-unused-vars\n\nI'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?","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"I have had the exact same errors when I created app using the create-react-app and setup the eslint for the application.\n\nThe eslint errors were showing up in the browser rather than in the console.\n\nOnce, I debugged all the dependencies. It seems that the react-scripts was causing the lint errors for me.\n\nThe 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.\n\nSolution:\nThis 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.\n\nThis 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.\n\nUpdate 2:\nActive Issue: https://github.com/facebook/create-react-app/issues/9887\n\nWorkaround for this issue until react-scripts:4.0.2 is released:\n\nInstall patch-package and postinstall-postinstall as dev dependency .\n\nGo to node_modules/react-scripts/config/webpack.config.js and make the following changes\n\nOnce done with the edit,run yarn patch-package react-scripts. This will create a patches folder, with the dependency patch in it.\n\nNow, 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.\n\n\"postinstall\":\"patch-package\".\n\nThis 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.\n\nThanks to @fernandaad for providing this workaround.\n\nUpdate 1:\nHad 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.\n\nDelete the node_modules and package.lock/yarn.lock.\nDowngrade react-scripts from 4.0.0 to 3.4.4.\nInstall the dependencies and start the app.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/64518226/my-create-react-app-is-failing-to-compile-due-to-eslint-error","votes":112,"created_at":"2026-04-19T04:51:24.123438+00:00","updated_at":"2026-04-19T04:51:24.123438+00:00"}