no-unused-expressions error when optional chaining + array method

[pendenaor]

const array = [{ a: 21 }]
array?.forEach(element => { element.a = element.a * 2 })
// => [ { a: 42 } ]

got an error on array : error Expected an assignment or function call and instead saw an expression no-unused-expressions

My configuration

package.json

  "devDependencies": {
    "@babel/core": "^7.0.0-0",
...
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
...
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/eslint-config-standard": "^4.0.0",
...
    "babel-eslint": "^10.0.3",
    "eslint": "^6.4.0",
    "eslint-config-semistandard": "^15.0.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^5.2.3",
...
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "browser": true,
      "jest": true
    },
    "plugins": ["babel"],
    "rules": {
      "no-unused-expressions": "error"
    },
    "globals": {
      "$": false,
      "jQuery": false,
      "module": false,
      "logger": false
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

[ljharb]

When would an array lack forEach? Separately, that looks like an eslint error from a core rule - but eslint doesn’t support anything that’s not stage 4, so the rule wouldn’t be able to handle those parse nodes (even with babel-eslint handling the parsing) until then.

[pendenaor]

May be a mistake from me, but the form x?.y is not about y but x. In my case, it's about array not null, if i want test forEach, the form will be x.y?.(), i think.

[pendenaor]

optional chaining is on the edge of stage 3, see tc39/ecma262#1646

[nicolo-ribaudo]

Try using the no-unused-expressions rule from this plugin instead of the one from ESLint

[pendenaor]

Try using the no-unused-expressions rule from this plugin instead of the one from ESLint

@nicolo-ribaudo can you please elaborate ? i'm completly lost...

[nicolo-ribaudo]

As the README states, there are some ESLint rules which don't correctly work with new language features:

babel-eslint does a great job at adapting eslint for use with Babel, but it can't change the built in rules to support experimental features. eslint-plugin-babel re-implements problematic rules so they do not give false positives or negatives.

That's the only reason for this plugin to exist. In your case, you need to use babel/no-unused-expressions instead of no-unused-expressions.

[pendenaor]

My eslintConfig section updated to :

{
...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "browser": true,
      "jest": true
    },
    "plugins": ["babel"],
    "rules": {
      "babel/new-cap": "error",
      "babel/camelcase": "error",
      "babel/no-invalid-this": "error",
      "babel/object-curly-spacing": "off",
      "babel/quotes": "off",
      "babel/semi": "off",
      "babel/no-unused-expressions": "error",
      "babel/valid-typeof": "error"
    },
    "globals": {
      "$": false,
      "jQuery": false,
      "module": false,
      "logger": false
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
}

But the same error continue to show up error Expected an assignment or function call and instead saw an expression no-unused-expressions

[bakkot]

@pendenaor

Per the readme:

remember to disable the original ones as well!

You need to explicitly disable no-unused-expressions. (Which is enabled by by @vue/standard, which inherits it from eslint-config-standard.)

You can do this by adding "no-unused-expressions": "off" to your rules.

[pendenaor]

Thanks.

[diegoazh]

The complete answer is, disable "no-unused-expressions": "off" from your eslint configruation (standard, airbnb, etc) and enable "babel/no-unused-expressions": "error" from your eslint-plugin-babel.

[joeshub]

May be a mistake from me, but the form x?.y is not about y but x. In my case, it's about array not null, if i want test forEach, the form will be x.y?.(), i think.

Just wanted to confirm a few items about the syntax and a quick note about top level access:

If you want to test forEach exists on x:

x.forEach?.()

If you want to test x exists and forEach exists on x:

x?.forEach?.()

Gotcha is that if x is not defined

x?.forEach?.()

will throw ReferenceError: Can't find variable: x.