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

by

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.

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. 404 Not Found when trying to install ESLint 8.4.4 with create-react-app
  3. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  4. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  5. Unexpected block statement surrounding arrow body
  6. Error when deploying react app and it keeps sayings
  7. Disable ESLint that create-react-app provides
  8. ESLint Must use destructuring state assignment
  9. ‘React’ was used before it was defined
  10. Infinite loop in useEffect
  11. 404 when trying to enter a react app route
  12. mobx-react observer don’t fires when I set observable
  13. How to re-render flatlist?
  14. How do I access refs of a child component in the parent component
  15. Om but in javascript
  16. How to set a default value in react-select
  17. ReactJS with ES6: this.props is not a function when I communicate two components
  18. useNavigate() may be used only in the context of a component
  19. Why React useState with functional update form is needed?
  20. How does the revalidate process in Incremental Static Regeneration work?
  21. What is the difference between using constructor vs getInitialState in React / React Native?
  22. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  23. How to hash CSS class names in Nextjs?
  24. Disable back button in react navigation
  25. How do I set a timezone in my Jest config?
  26. Select row on click react-table
  27. how to set initial state in redux
  28. How do I see state when logging to the console instead of Proxy object inside reducer action?
  29. Passing array to useEffect dependency list
  30. jest: Test suite failed to run, SyntaxError: Unexpected token import

Leave a Comment