Error while running ESLint

[kykungz]

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]

You need to update ESLint to the latest version.

npm install eslint@latest

[MarkLunney]

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]

@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

[corysimmons]

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]

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.

[harrysolovay]

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

[harrysolovay]

For reference:

[corysimmons]

@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.

[harrysolovay]

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

[corysimmons]

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

[corysimmons]

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.

[harrysolovay]

Hahaha sorry about that

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

I really appreciate your help.

Best,

Harry

[d4rky-pl]

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)