How to Fix no-unused-expressions ESLint Error When Using Optional Chaining?

Fix for "no-unused-expressions" ESLint error when using JavaScript optional chaining

If you're seeing the "no-unused-expressions" ESLint error, then it is likely that you are using a version of ESLint that does not support the optional chaining syntax. For example, you may see an error when you do something like the following:

// Error: Expected an assignment or function call and instead saw an expression. (no-unused-expressions)
someFunction?.();
obj?.someFunction?.();
// ...

To fix this issue, you try the following in top-down order:

  1. Update ESLint;
  2. Update ESLint Configuration;
  3. Clear ESLint Cache;

Update ESLint

Support for Optional Chaining was added to ESLint in v7.5.0. So, if you have the option of updating ESLint, that might help.

Additionally, if you're using react-scripts, this issue seems to have been fixed in v4.0.0, so you may want to try updating it.

Update ESLint Configuration

Edit your .eslintrc (or .eslintrc.json) file, and add the following rule if you're using TypeScript:

// ...
"rules": {
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-expressions": "error"
}

If you're not using TypeScript, but are transpiling your code using Babel, then you can add the following rule in your .eslintrc (or .eslintrc.json) file:

// ...
"rules": {
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-expressions": "error"
}

If you're using third-party configurations, such as @vue/standard, eslint-config-airbnb, or any others that extend from the standard ESLint configuration (i.e. "eslint-config-standard"), then you can simply extend those configurations and add the rules mentioned above. For example:

{
    "extends": ["@vue/standard"],
    // ...
    "rules": {
        "no-unused-expressions": "off",
        "@typescript-eslint/no-unused-expressions": "error"
    }
}

Clear ESLint Cache

If you've already tried other options and the issue still persists, then try purging ESLint cache, for example, like so:

rm -rf node_modules/.cache/eslint-loader

After doing that, make sure to rebuild/recompile your project.

Alternatively, you could also try restarting your IDE, or try invalidating your IDE cache.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.