relay-compiler does not support JSX fragments

[hisapy]

This is possibly a bug.

Given a component with a React fragments:

<Card
     // other props here
     actions={
        <>
          <Button ... />
          <Button ... />
        </>
      }
/>

, when running relay-compiler, I get the following error:

ERROR:
Parse error: SyntaxError: Unexpected token (492:13) in "app/company-constitutions/CompanyConstitutionForm.jsx"
From: CodegenRunner.compileAll
    at /Users/hisa/workspace/eljurista/node_modules/relay-compiler/bin/relay-compiler:2816:18
    at /Users/hisa/workspace/eljurista/node_modules/relay-compiler/bin/relay-compiler:2818:9
    at Set.forEach (<anonymous>)
    at ASTCache.parseFiles (/Users/hisa/workspace/eljurista/node_modules/relay-compiler/bin/relay-compiler:2811:12)
    at CodegenRunner.parseFileChanges (/Users/hisa/workspace/eljurista/node_modules/relay-compiler/bin/relay-compiler:5174:13)
    at CodegenRunner.<anonymous> (/Users/hisa/workspace/eljurista/node_modules/relay-compiler/bin/relay-compiler:5160:13)
    at Generator.next (<anonymous>)
    at step (/Users/hisa/workspace/eljurista/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/hisa/workspace/eljurista/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <anonymous>
error Command failed with exit code 100.

This is happening with the following package versions:

yarn list --pattern "relay|babel-runtime"
yarn list v1.3.2
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

I believe for this to work, the babel dependencies has to be updated to v7

[alloy]

It seems unlikely that Relay would adopt a beta version of Babel right now and I also wouldn’t be surprised if Relay can’t adopt Babel 7 immediately once a final version is released. However, using the language plugin support added by PR #2293, you could make a plugin that basically copies all of the builtin JS plugin but make it use Babel 7 instead.

It would be very much appreciated if you could take a stab at that and thus test out PR #2293 and leave feedback on the PR about whether or not it works well for you or if changes need to be made 🙏

[hisapy]

Hi @alloy

I'll try to help with this as soon as I finish with some deadlines at my job. Also, I don't know about language plugin support. Anyways I have a couple of questions:

1. Would a plugin approach have a negative impact on the build process performance compared with the normal build process?

2. Would a PR to update to Babel v7 be worthy when stable or is Relay going to stop using Babel?

And just for the record, if anyone is looking to use JSX fragments with Relay, you can use the Fragment syntax

import React, { Fragment } from react;

// in some render
<Fragment>
</Fragment>

It is not as sexy as <> ... </> but it works

[alloy]

I'll try to help with this as soon as I finish with some deadlines at my job.

Sure, no need to hurry on my account 😄

Would a plugin approach have a negative impact on the build process performance compared with the normal build process?

Nope, just as fast (aside from potential Babel 6 vs 7 performance differences).

Would a PR to update to Babel v7 be worthy when stable or is Relay going to stop using Babel?

I can’t speak for the Relay team, but I do understand some of their constraints and would not be surprised to see them adopt Babel 7 at a later stage. However, having a works version as a plugin would probably allow them to know and test that everything works well sooner.

[alloy]

@hisapy Looks like FB is moving to Babel 7 (at least for parsing) faster than I’d have expected, so you’re in luck! https://github.com/facebook/relay/commit/ea93d0e0af562e80962fdb016b864f4c89fad626

@kassens @jstejada This can be closed as fixed.