Create React App 4 not applying custom eslint configuration during the compiling process

Viewed 1390

Context

It used to be that you had to set the EXTEND_ESLINT flag to true in your .env file, and then add this to your package.json

// package.json

"eslintConfig": {
    "extends": [
      "react-app",
      "./.eslintrc.json"
    ]
  },

Since CRA4 it is possible to extend the base eslint configuration used during the compiling process, without enabling any flag since, apparently, it's enabled by default

My .eslintrc.json file is this

// .eslintrc.json

{
  "extends": [
    "react-app",
    "plugin:jest-dom/recommended",
    "prettier",
    "plugin:@typescript-eslint/eslint-recommended"
  ],
  "plugins": ["jest-dom", "@emotion", "@typescript-eslint"],
  "rules": {
    "no-unused-vars": "off",
    "no-console": "warn"
  },
  "overrides": [
    // TS only rules
    {
      "files": ["**/*.ts?(x)"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-explicit-any": "error"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}

and my package.json is this

// package.json

"eslintConfig": {
    "extends": [
      "./.eslintrc.json"
    ]
  },

Running eslint src --fix-dry-run --ext .tsx,.ts,.js,.jsx gives me āœ– 30 problems (2 errors, 28 warnings)

The problem

It is my understanding that the same errors should show up when CRA compiles the code, since, supposedly, the eslint configuration is extended. However, my project builds just fine, with no warnings at all.

Things I have tried

// package.json

"eslintConfig": {
    "extends": [
      ".eslintrc.json"
    ]
  },
// package.json

"eslintConfig": {
    "extends": [
      "react-app", // even though my config already extends that
      "./.eslintrc.json"
    ]
  },
// package.json

"eslintConfig": {
    "extends": [
      "react-app", // even though my config already extends that
      ".eslintrc.json"
    ]
  },
// package.json

"eslintConfig": {
    //move my whole eslint configuration here and remove the .eslintrc.json file
  },

Nothing seems to actually extend the eslint configuration that CRA uses when it compiles.

The question

Do I do something wrong here, or does this look like an issue with CRA?

1 Answers

If you have a .eslintcache file in the project folder, try removing it and building again.

It is possible to debug the entire build with node --inspect-brk node_modules/react-scripts/scripts/build and using chrome://inspect set breakpoints to possibly trace why ESLint is behaving differently, or creating a new project from the template to determine what is causing the behavior to change.

Related