Relay: Document the use of babel-relay-plugin with React Native

[steveluscher]

Can someone add a little note to the docs that explains how and why to configure the babel-relay-plugin to run before the react-native Babel preset?

{
  "passPerPreset": true,
  "presets": [
    {"plugins": ["./plugins/babelRelayPlugin"]},
    "react-native"
  ]
}

[steveluscher]

Further reading: #714.

[vjefri]

I can read over #714 and add a paragraph that explains why we need to configure the babel-relay-plugin to run before the react-native. Modifications should be made here correct: https://facebook.github.io/relay/docs/guides-babel-plugin.html#content? Thanks again.

[steveluscher]

That sounds like a good place. Thanks!

On Mar 10, 2016, at 8:36 AM, Jefri Vanegas [email protected] wrote:

I can read over #714 https://github.com/facebook/relay/pull/714 and add a paragraph that explains why we need to configure the babel-relay-plugin to run before the react-native. Modifications should be made here correct: https://facebook.github.io/relay/docs/guides-babel-plugin.html#content https://facebook.github.io/relay/docs/guides-babel-plugin.html#content? Thanks again.

—
Reply to this email directly or view it on GitHub https://github.com/facebook/relay/issues/935#issuecomment-194734824.

[abhishiv]

Hey guys, is this broken for anyone else on 0.9? I'm getting Unexpected invocation at runtimer error, and have been trying to track it down all day today.

[steveluscher]

Hey @abhishiv! Post a question on Stack Overflow with the tag #relayjs with as much detail as you possibly can about your setup. Be sure to post a link back here so we can follow up.

[abhishiv]

Thanks Steve, I was finally able to track it down. It seems to be a very strange issue. I'll just leave the resolution in this thread in case someone else gets stuck like me.

@BerndWessels/babel-relay-plugin-loader

https://stackoverflow.com/questions/37449580/this-is-no-longer-bound-when-using-arrow-functions-after-upgrading-to-react-nati/37474298#37474298

[gre]

This configuration does not seem to work as soon as your code or one of your lib use the class property method of ES2015.

I mean this:

class A {
  bar () { return "it works!"; }
  foo = () => this.bar();
}
new A().foo();

it breaks with the config mentioned above.

Why not just:

{
  "presets": ["react-native"],
  "plugins": [
    "./plugins/babelRelayPlugin"
  ]
}

^^^ This seems to work and don't have the issue i'm mentionning.

( context https://github.com/ProjectSeptemberInc/gl-react-native/issues/90#issuecomment-226992859 )

[chirag04]

@gre class properties after babel-core 6.5 does not work with passPerPreset.(https://phabricator.babeljs.io/T7274)

@steveluscher wondering if passPerPreset is required now.

[st0ffern]

@chirag04 been using this solution for quite a while, and it works fine for me

[alloy]

My working setup is the same as @gre’s.

[taion]

BTW, digging into this a bit –

The order in which plugins run is actually:

1. All plugins in order
2. All presets in reverse order

This means that if you apply the template literal transform in a preset, then as long as you specify the Relay transform in plugins, or you specify the preset with the Relay transform _after_ the preset with the template literal transform, then you don't need passPerPreset.

[taion]

BTW, I would suggest recommending against the use of passPerPreset. Various things tend to go wrong when using passPerPreset, such that it feels cleaner to just make sure the Relay Babel plugin gets listed in the correct place.

[wincent]

(Spring cleaning.) This issue was created nearly a year ago and is now quite stale. Going to close it out, but please feel free to submit any improvements to the documentation as PRs; we're always happy to see the documentation get better.