[eslint-config-react-app] Property "overrides" is the wrong type

[visualcookie]

Desribe the bug

When either trying to save a file or type some code in VSCode, you'll get the following error back:

[Error - 4:41:56 PM] ESLint stack trace:
[Error - 4:41:56 PM] Error: ESLint configuration in .eslintrc.js » eslint-config-react-app is invalid:
	- Property "overrides" is the wrong type (expected array but got `{"files":["**/*.ts","**/*.tsx"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},"warnOnUnsupportedTypeScriptVersion":true},"plugins":["@typescript-eslint"],"rules":{"default-case":"off","no-dupe-class-members":"off","@typescript-eslint/no-angle-bracket-type-assertion":"warn","no-array-constructor":"off","@typescript-eslint/no-array-constructor":"warn","@typescript-eslint/no-namespace":"error","no-unused-vars":"off","@typescript-eslint/no-unused-vars":["warn",{"args":"none","ignoreRestSiblings":true}],"no-useless-constructor":"off","@typescript-eslint/no-useless-constructor":"warn"}}`).

Did you try recovering your dependencies?

Yes, I did. But didn't work. Even downgraded ESLint back to 5.16.0, same issue.

Which terms did you search for in User Guide?

Not using create-react-app. I'm using Gatsby here.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Safari: 12.1.1
  npmPackages:
    gatsby: 2.8.4 => 2.8.4 
    gatsby-image: ^2.1.2 => 2.2.3 
    gatsby-plugin-flow: ^1.1.0 => 1.1.0 
    gatsby-plugin-intl: ^0.2.4 => 0.2.4 
    gatsby-plugin-manifest: ^2.1.1 => 2.2.0 
    gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3 
    gatsby-plugin-offline: ^2.1.1 => 2.2.0 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.0 
    gatsby-plugin-sharp: ^2.1.3 => 2.2.1 
    gatsby-plugin-styled-components: ^3.1.0 => 3.1.0 
    gatsby-source-directus7: ^0.8.0 => 0.8.0 
    gatsby-source-filesystem: ^2.0.38 => 2.1.1 
    gatsby-transformer-sharp: ^2.1.21 => 2.2.0 
  npmGlobalPackages:
    gatsby-cli: 2.6.3

// .eslintrc.js

module.exports = {
  globals: {
    __PATH_PREFIX__: true
  },
  extends: [
    "react-app",
    "airbnb",
    "prettier",
    "prettier/react",
    "prettier/flowtype"
  ],
  plugins: ["prettier", "flowtype"],
  rules: {
    "prettier/prettier": [
      "error",
      {
        semi: false,
        trailingComma: "es5",
        printWidth: 100,
        singleQuote: true
      }
    ],
    radix: ["error", "as-needed"],
    "no-console": ["error", { allow: ["error"] }],
    "global-require": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "react/jsx-indent": "off",
    "react/destructuring-assignment": "off",
    "react/default-props-match-prop-types": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-filename-extension": [
      1,
      {
        extensions: [".js"]
      }
    ],
    "react/prop-types": "off",
    "import/extensions": "off",
    "import/prefer-default-export": "off",
    "flowtype/boolean-style": [2, "boolean"],
    "flowtype/define-flow-type": 1,
    "flowtype/generic-spacing": [2, "never"],
    "flowtype/no-primitive-constructor-types": 2,
    "flowtype/no-types-missing-file-annotation": 2,
    "flowtype/object-type-delimiter": [2, "comma"],
    "flowtype/require-valid-file-annotation": 2,
    "flowtype/space-after-type-colon": [2, "always"],
    "flowtype/space-before-generic-bracket": [2, "never"],
    "flowtype/space-before-type-colon": [2, "never"],
    "flowtype/union-intersection-spacing": [2, "always"],
    "flowtype/use-flow-type": 1,
    "flowtype/valid-syntax": 1,
    "flowtype/type-id-match": [2, "^([A-Z]+[a-z0-9A-Z]*)$"],
    "flowtype/require-return-type": [
      2,
      "always",
      {
        annotateUndefined: "never",
        excludeArrowFunctions: "expressionsOnly"
      }
    ],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        components: ["Link", "ButtonLink"],
        specialLink: ["to", "as"],
        aspects: ["noHref", "invalidHref", "preferButton"]
      }
    ]
  },
  settings: {
    "import/resolver": {
      "babel-module": {}
    },
    flowtype: {
      onlyFilesWithFlowAnnotation: false
    }
  }
};

Steps to reproduce

1. Install Gatsby and initiate a new Gatsby project
2. Follow these steps to add a custom .eslintrc.js to a Gatsby project

The error should pop right up if you use VSCode for example.

Expected behavior

No error and the code gets formatted.

Actual behavior

Error and the code does not get formatted. Currently nothing from the .eslintrc.js works.

Reproducible demo

Sadly, no reproducible demo, due to the issue being related to the ESLint plugin not create-react-app.

[bugzpodder]

What's the output for yarn why eslint

[Grsmto]

This is fixed in #7219

[visualcookie]

@bugzpodder VSCode ships with an ESLint plugin, that's mainly why.
@Grsmto Thanks. Seems like Gatsby needs to make the update then?

Ah, nevermind. It looks like it's fixed. Won't get any errors from VSCode anymore and the code formatting also works again.

Closed.

[0zguner]

Sadly, this fix has been sitting there for 14 days. Can you release this fix with version 6.0.2 ? @ianschmitz

[isabellachen]

I used create-react-app to create my app, and I keep getting this error in vscode - how do I get rid of it? I tried updating react but its the same version as it was when I created the app first a couple of weeks ago. What is the solution to get rid of the error?

[kladnik]

Have the same problem with a newly created react app. What is there to do?

[mattfreed]

Have close to the same problem, used the create-react-app and get this error in Websotrom 2019.1.3:
Property "overrides" is the wrong type (expected array but got {"files":["**/__tests__/**/*.js","**/*.spec.js","**/*.test.js"],"env":{"jest":true,"jest/globals":true}}).

[zifahm]

any workarounds for now?

[kladnik]

I'm using ESLint 5.16.0 until it is updated. Works fine.

[chibicode]

@ianschmitz This is breaking apps that have the latest ESLint (6.0.x) and "extends": [..., "react-app", ...] on .eslintrc. Would it be possible to just update https://www.npmjs.com/package/eslint-config-react-app as @mzgnr said?

[baitun]

Solution for me was to downgrade eslint from version 6 back to 5 with npm i eslint@5.16.0