no-unused-expressions warning for optional chaining

Describe the bug

I just upgrade react-scripts to 3.3.0. I am able to use nullish coalescing, but when I attempt to use optional chaining, I can’t compile as I get this error:

./src/components/Select/Select.tsx
  Line 141:5:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

The line in question is:

    this.props.onChange?.(resultingValue);

Did you try recovering your dependencies?

No, I don’t have time at the moment. If this might help I’ll try it.

Which terms did you search for in User Guide?

I searched for optional chaining, no-unused-expressions, eslint optional chaining.

Environment

npx: installed 91 in 30.467s

Environment Info:

  System:
    OS: Windows 10 10.0.17134
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 12.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1098.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.12.0 => 16.12.0
    react-dom: ^16.12.0 => 16.12.0
    react-scripts: 3.3.0 => 3.3.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Use optional chaining.
2. Attempt to run npm start.

Expected behavior

I expected the app to compile and for the code to function like:

    this.props.onChange !== undefined && this.props.onChange(resultingValue);

Actual behavior

The app failed to compile and gave the above message.

[danielkcz]

Support already exists, you need to enable @typescript-eslint/no-unused-expressions instead of no-unused-expressions.

https://github.com/typescript-eslint/typescript-eslint/issues/1241#issuecomment-556027910

I tried when I enable typescript variant but keep regular one and sadly, it will complain. Only when that regular rule is explicitly disabled, it works correctly.

So shouldn’t that rule be enabled in eslint-config-react-app instead? It should work for JS files just fine if I am not mistaken.

Oh I see it’s been already done: https://github.com/facebook/create-react-app/pull/8003

[heyimalex]

It looks like there’s a workaround by using eslint-plugin-babel if anyone wants to try that out?