React.Fragment works but the short syntax (<>...</>) doesn't

[devuxer]

In my .tsx file, I'm able to use React.Fragment:

return (
    <React.Fragment>
        <p>Your registration has been validated.</p>
        <p>You will be notified by email once an administrator has approved your registration.</p>
    </React.Fragment>
);

But I'm not able to use the short syntax:

return (
    <>
        <p>Your registration has been validated.</p>
        <p>You will be notified by email once an administrator has approved your registration.</p>
    </>
);

The short syntax results in:

ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:10:5
TS1109: Expression expected.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:10:6
TS1109: Expression expected.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:13:5
TS2657: JSX expressions must have one parent element.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:13:7
TS1109: Expression expected.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:14:1
TS1109: Expression expected.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:10:5
TS2365: Operator '>' cannot be applied to types 'boolean' and 'Element'.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:11:9
TS2695: Left side of comma operator is unused and has no side effects.
ERROR in [at-loader] ./src/client/account/components/info-panel/InfoPanel.tsx:13:7
TS7027: Unreachable code detected.

Are there plans to support the short syntax for JSX/TSX fragments?

[geovanisouza92]

I think that's related to microsoft/TypeScript#20469.

[devuxer]

@geovanisouza92,

Well, I'm confused. The issue you referenced seems to be requesting support for this in JSX even for non-React projects, but I'm experiencing these errors within a React project.

Also, microsoft/TypeScript#19249 seems to indicate that <>...</> should already be working. I'm using TypeScript 2.6.2, which according to https://github.com/Microsoft/TypeScript/releases/tag/v2.6.2 has JSX fragments.

So, I'm really confused why I'm still having this issue. Is this definitely not an issue with ATL?

[geovanisouza92]

@devuxer You're right, I referenced some unrelated content, because problems with TS syntax aren't ATL responsibility, AFAIK, and considering that it only requires TS as peerDependency, the version used (must be) the same of your project.

Can you try a fresh install, just to confirm that the correct versions work well together?

[devuxer]

Great suggestion, and that solved my problem!

It turns out, I had not updated TypeScript to 2.6.2 as I thought. Apparently, entering tsc -v in the terminal shows the version of TypeScript installed in VSCode, not the one actually saved in my project's node_modules folder. Or something like that.

Anyway, thanks for your help!