Error while running ESLint

[Kongpon Charanwattanakit]

So I've been using create-react-app and decided to install eslint-config-standard by:

yarn add eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --dev

And here is my .eslintrc

{
  "extends": "standard"
}

Any help?

[Feross Aboukhadijeh]

You need to update ESLint to the latest version.

npm install eslint@latest

[Mark Lunney]

Hi,

I'm still receiving this error after updating all of my dependencies. Anything I might've missed?

[Error - 16:36:40] /Users/mark.lunney/Documents/react-component-library/node_modules/eslint-config-standard/index.js: Configuration for rule "indent" is invalid: Value "[object Object]" should NOT have additional properties. Referenced from: /Users/mark.lunney/Documents/react-component-library/.eslintrc

package.json:

    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-config-standard-react": "^6.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-standard": "^3.0.1",

eslintrc:

{
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "standard-react"
  ],
  "env": {
    "es6": true,
    "jest": true
  },
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "rules": {
    "no-case-declarations" : 1,
    "react/jsx-no-bind": [1, {}],
    "space-before-function-paren": 0,
    "react/jsx-boolean-value": 0,
    "import/first": 0
  }
}

[Feross Aboukhadijeh]

@MarkLunney I would double check that you aren't running a globally-installed eslint by accident, and that if you do run a global version, that it's also updated:

npm install eslint@latest -g

[Cory Simmons]

With create-react-app 1.x, if you npm i eslint@latest you run into this standard/eslint-config-standard-react#48

Reverting 5ad91a8 fixes it.

Alternatively, npm i -D eslint-config-standard@10.2.1 will fix it.

---

All this to say, if you want Standard + CRA, then you need to downgrade that indent rule until CRA supports eslint@5+.

---

standard/eslint-config-standard-react#48 is fixed in standard/eslint-config-standard-react#49 so yarn add eslint@5 should work. 👍

If you're using CRA + react-app-rewired (rewire-ESLint), then you'll have 2 versions of ESLint (4 from CRA and the 5 you manually installed). Fix this with Yarn resolutions or you'll get random weird linting errors.

Example rewired package.json with a ton of Standard stuff:

{
  "name": "foo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "eslint-config-tonz-of-standard-and-react-stuff": "^1.0.0", // not a real config
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewired": "^1.5.2"
  },
  "resolutions": {
    "eslint": "*" // this will always use the latest installed eslint instead of CRA's crappy eslint@4.
  },
  "eslintConfig": {
    "extends": "tonz-of-standard-and-react-stuff"
  }
}

[Feross Aboukhadijeh]

FYI, I just released ESLint 5 versions of all the standard packages just now. So you can go all in on ESLint 5 if you wish to, or stay locked to the ESLint 4 versions, up to you.

[Harry Solovay]

This error still occurs with eslint@5.5.0 and eslint-config-standard@12.0.0

Here's my .eslintrc:

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "standard",
    "standard-react"
  ],
  "globals": {
    "fetch": true
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-curly-spacing": [ 2, "always" ],
    "react/jsx-tag-spacing": [ 2, {
      "beforeClosing": "never",
      "beforeSelfClosing": "always",
      "closingSlash": "never",
      "afterOpening": "never"
    }],
    "react/jsx-max-props-per-line": [2, {
      "maximum": 2,
      "when": "always"
    }],
    "react/jsx-closing-bracket-location": [2, "tag-aligned"],
    "template-curly-spacing": [ 2, "always" ],
    "space-before-blocks": [ 2, "always" ],
    "object-curly-spacing": [ 2, "always" ],
    "array-bracket-spacing": [ 2, "always" ],
    "computed-property-spacing": [ 2, "always" ]
  }
}

I managed to avoid the error by going into node_modules/eslint-config-standard/eslintrc.json and changing the following:

"indent": ["error", 2, {
  "SwitchCase": 1,
  "VariableDeclarator": 1,
  "outerIIFEBody": 1,
  "MemberExpression": 1,
  "FunctionDeclaration": { "parameters": 1, "body": 1 },
  "FunctionExpression": { "parameters": 1, "body": 1 },
  "CallExpression": { "arguments": 1 },
  "ArrayExpression": 1,
  "ObjectExpression": 1,
  "ImportDeclaration": 1,
  "flatTernaryExpressions": false,
  "ignoreComments": false
}],

to

"indent": ["error", 2],

... however, this is messy, as the fix will be undone with each package installation/removal. Also, we don't benefit from those rules (writing an extra indentation for multi-line ternary operators, for example, is (imo) cleaner... and I don't want that style to produce an ESLint error).

Any chance you could please push a fix for this?

Thank you for taking the time to look this over.

Kind regards,

Harry

[Harry Solovay]

For reference:

[Cory Simmons]

@harrysolovay It's possible npm or yarn is using the older version. Try using yarn for all your stuff and it exposes something called resolutions where you can specify for your scripts to use eslint@5, which I think might fix your problem.

[Harry Solovay]

Thanks for the suggestion, but I've tried that already. Any other potential solutions?

[Cory Simmons]

rm -rf node_modules; yarn? I'm 99% sure this is because something is resolving ESLint at 4. Can you show yarn.lock?

[Cory Simmons]

I should've been more specific and requested a gist of your yarn.lock, not pasting 3000vh of text to a GH issue. 😂

Please edit your comment to get rid of it.

Notice this:

2 deps are installing different versions of ESLint.

If you add...

  // ...
  "resolutions": {
    "eslint": "^5.5.0"
  }

...to your package.json then your yarn.lock will one-line those two deps indicating you're just using one version for everything.

[Harry Solovay]

Hahaha sorry about that

IT WORKS :) THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I really appreciate your help.

Best,

Harry

[Michał Matyas]

The solution with resolutions is unfortunately flaky as hell on CIs with node_modules cache. Had to drop using standardjs for now since we cannot update our CRA stack yet (for very good reasons unfortunately)

[Cory Simmons]

@d4rky-pl I feel you. It's not ideal. Standard was attractive because it was like npm i standard and everything JustWorked™️, but now it's 50 packages and config hell so I just stopped using it or caring at all about code style.

If you still care, I'd suggest trying to flush your node_modules cache on CI, then use Yarn on your CI, and if your CI can't do that, change CI.

[Joshua Pinter]

FYI, I got a similar error when trying to add "allowSeparatedGroups": true option to sort-imports:

Error: .eslintrc.json:
	Configuration for rule "sort-imports" is invalid:
	Value {"allowSeparatedGroups":true,"ignoreCase":true,"ignoreDeclarationSort":false,"ignoreMemberSort":false} should NOT have additional properties.

Turned out that it was only added recently in version 7.5.0 and I was still on 6.8.0.

If you run into a similar error, check your ESLint version and when certain options may have been added.

[Jonathon Armstrong]

Would be nice for the documentation to indicate when options were added (if added later than the rule). Only saying when the rule was added surely leads to lots of head scratching and extra time searching through release notes or Git history.