How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)

Viewed 9246

I am using ANTd with a React application I am building for a school project. The App runs fine however, on startup I get the following: craco: *** Cannot find ESLint loader (eslint-loader). *** which is concerning. I have looked into this and apparently this link https://github.com/gsoft-inc/craco/pull/219 offers support for the issue. I am not advanced enough to know how to apply this fix to my own React project and I feel myself and other beginners would benefit greatly from an explanation on how to do so. Thanks to whoever can help!

2 Answers

For react, this happens when we have DISABLE_ESLINT_PLUGIN=true in our environment variable (or in the .env.production file). Instead, we should disable ESLint in craco.

Remove DISABLE_ESLINT_PLUGIN=true from environment variable or env file.
Then in craco.config.js, add this:

module.exports = {
  // ...
  eslint: {
    enable: false
  },
  // ...
}

Was an easy fix.

In package.json replace/add the following dependencies:

{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "antd": "^4.12.2",
    "craco-less": "^1.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
Related