search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.84k stars 26.88k forks source link

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

Closed visualcookie closed 5 years ago

visualcookie commented 5 years ago

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 commented 5 years ago

What's the output for yarn why eslint

Grsmto commented 5 years ago

This is fixed in https://github.com/facebook/create-react-app/pull/7219

visualcookie commented 5 years ago

@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 commented 5 years ago

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

isabellachen commented 5 years ago

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 commented 5 years ago

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

mattfreed commented 5 years ago

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 commented 5 years ago

any workarounds for now?

kladnik commented 5 years ago

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

chibicode commented 5 years ago

@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 commented 5 years ago

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

InSuperposition commented 5 years ago

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

@kladnik 's suggestion worked for me.

mbulfair commented 5 years ago

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 commented 5 years ago

+1 for Eslint 6

SampsonCrowley commented 5 years ago

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 commented 5 years ago

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

msitruk commented 5 years ago

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 commented 5 years ago

I was having the same problem, I downgraded to eslint@5.1 and I am no longer receiving this error

saifsadi commented 5 years ago

I was having the same problem, I downgraded to eslint@5.1 and I am no longer receiving this error

Thanks, It worked for me too.

SampsonCrowley commented 5 years ago

@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 commented 5 years ago

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

It worked! Thx

SampsonCrowley commented 5 years ago

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 commented 5 years ago

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

robersonfox commented 5 years ago

It's worked for me npm i -s eslint@5.16.0

bugzpodder commented 5 years ago

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

SampsonCrowley commented 5 years ago

@bugzpodder close when it's released?