no-unused-expressions warning for optional chaining

[iansan5653]

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.

[heyimalex]

It looks like those features just aren't currently supported by eslint? From #8003 it looks like we support using them with typescript, but until eslint lands support I'm not sure there's a solution. Take this with a grain of salt because I wasn't involved in landing those features.

[iansan5653]

I knew it looked like an eslint error, but why are eslint errors preventing the page from rendering? I believe in linting but I'm not sure I can see a good reason for preventing compiling if there's a lint problem.

Until they add support, how can we disable this rule for CRA?

Your link is broken btw, correct link: eslint/eslint#12642

[heyimalex]

I think that you can't on a project level; we only support overriding with inline comments. You might be better off just not using optional chaining (unless you're using typescript) until a fix for this lands in eslint. I'm sorry, I know that isn't a great answer.

[iansan5653]

Sorry, I should've mentioned this previously - I am using TypeScript. How can I make it work in that case?

[heyimalex]

You can only use it in typescript files. Using a fresh install with --template typescript and adding this to App.tsx doesn't emit an error for me.

const foo = {} as any;
foo.unknown?.();

Just to be clear, I can reproduce in js files.

[danielkcz]

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

typescript-eslint/typescript-eslint#1241 (comment)

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: #8003

[josias-r]

Just wanted to add, that you need TS < 3.7 for this to work, if that wasn't clear yet.
Optional chaining is working fine with my project.

[danielkcz]

@josias-r What? :) Optional chaining is a feature of TS 3.7. Whatever is working for you, might be because you have Babel somewhere in there 🤷‍♂

[josias-r]

@FredyC sorry meant to say TS 3.7 or higher. I have no special babel setup in my project. react-scripts 3.3.0 and prettier is installed and I can use optional chaining without problems in TSX files.

[danielkcz]

I think this issue can be closed now because eslint-config-react-app@5.1.0 is correctly using @typescript-eslint/no-unused-expressions for ts/tsx files.