Create-react-app: [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 https://github.com/facebook/create-react-app/pull/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 [email protected]

[InSuperposition]

@visualcookie Can you reopen this issue? It seems to be an issue with eslint v6

@kladnik 's suggestion worked for me.

[mbulfair]

I'm using this outside of create-react-app as well, and looks like that configuration hasn't been updated in 2 months, until it is, I have to downgrade back to 5x as well.

[SampsonCrowley]

+1 for Eslint 6

[SampsonCrowley]

There was a merged pull request 3 weeks ago that included fixes for this, but it has not been released

I created eslint-config-react-app-eslint-six in the mean time, just change "react-app" to "react-app-eslint-six" in your eslint extends setting

[anton-bot]

@facebook At least can you publish a pre-release version to npm, please.

[msitruk]

Same issue with new install today with last version of Webstorm 2019.1.3 i did downgrade to "eslint": "5.16.0" and all is working now waiting for news to go for version 6+

[j-stuckey]

I was having the same problem, I downgraded to [email protected] and I am no longer receiving this error

[saifsadi]

I was having the same problem, I downgraded to [email protected] and I am no longer receiving this error

Thanks, It worked for me too.

[SampsonCrowley]

@saifsadi yes we know that fixes the problem, because the problems is a breaking change in the latest _major_ version of ESLint.

You can either use eslint-config-react-app-eslint-six to use ESLint 6+, or downgrade ESLint to < 6

[likeanormaldude]

Solution for me was to downgrade eslint from version 6 back to 5 with npm i [email protected]

It worked! Thx

[SampsonCrowley]

What's the output for yarn why eslint

@bugzpodder VSCode ships with an ESLint plugin, that's mainly why.

@visualcookie yarn why eslint is a command to make yarn output what version is being used and why, not a question

[chibicode]

Seems like the new release is coming very soon (comment by @mrmckeb): https://github.com/facebook/create-react-app/pull/7415#issuecomment-516784849

[robersonfox]

It's worked for me npm i -s [email protected]

[bugzpodder]

Thanks all, 3.1 will be released this week with this fix.

[SampsonCrowley]

@bugzpodder close when it's released?