Relay: Make Relay work with React Native out of the box

[qingfeng]

The remaining steps are:

• [x] Relay/React Native/fbjs versioning
• [x] Use the appropriate unstableBatchedUpdates depending on React/React Native
• [x] Version of fetch polyfill for React Native
• [ ] Document the use of babel-relay-plugin with React Native (see discussion at https://github.com/facebook/relay/pull/714#issuecomment-181204627)
• [x] Create a fresh React Native project, set up Relay, configure the plugin per the documentation added in the previous step, and make sure everything works as expected.

Note: edited by @josephsavona

[yongxu]

have not tried yet, but looks like so.
some examples from docs use react native components
https://facebook.github.io/relay/docs/guides-containers.html#content

[josephsavona]

Relay should work as-is on React Native - if not, feel free to let us know and re-open this!

[amccloud]

@josephsavona even if relay components aren't inheriting react-native's Component?

https://github.com/facebook/relay/blob/master/src/container/RelayContainer.js#L23

I'm getting Can't find variable: document in getActiveElement

[amccloud]

I also needed to include johanneslumpe/react-native-browser-polyfill to get around a similar issue Can't find variable: self in whatwg-fetch

[boourns]

@josephsavona Relay cannot work as-is with React Native because Relay includes React web as a hard dependency, and including React web into React Native is not functional.

Here's a commit that shows the minimal changes to build relay against react-native:
https://github.com/facebook/relay/commit/e0037c78931edc3286e5217894348ca8ece1225b

The 'dist' step of building relay still fails with that commit, with the error:

I'm not sure exactly why that's failing.

The last two things we had to do to get relay working with react native was:

• Commit relay's /lib directory since building dist failed (above)
• stub process.env before including Relay in the react-native application, since process doesn't exist in react-native's JS environment. This is only necessary until the dist step of compilation works, since dist will remove all process.env references. I made a pseudo-module called 'relay',, which is a bit silly but functional:

process = {env: {}};

module.exports = require('react-relay');

[boourns]

Last thing I forgot to mention regarding relay's compatibility with react-native:

relay assumes self is present. This is true in react-native _only when debugging in Chrome_. If you are not debugging in Chrome you will get an error self is not defined when including Relay. A solution is to add https://github.com/johanneslumpe/react-native-browser-polyfill to your react-native project.

[amccloud]

@josephsavona can we re-open this?

[josephsavona]

@amccloud thanks for investigating, I'm reopening to give us a place to track this.

[boourns]

The last thing we needed to do to get relay working with react-native was to use react-native's global fetch by deleting the var fetch = require('fbjs/lib/fetch'); line from lib/RelayDefaultNetworkLayer.js.

We've gotten basic requests working following the steps I've outlined above in my comments on this issue, but I'm not 100% certain other things aren't broken yet.

[clintonwoo]

@boourns that's great. I also had to delete var fetch = require('fbjs/lib/fetch') from the following library which was declared in lib/RelayDefaultNetworkLayer.js:
var fetchWithRetries = require('fbjs/lib/fetchWithRetries');

[almeynman]

@boourns @clintonwoo Hello guys, followed your step all the way, however i get an error 'can't find variable fetchWithRetries', however when adding it i get 'cannot find variable: self'. Any tips would be greatly appreciated. github repo is https://github.com/almasakchabayev/reactNativeRelayWebpackDemo.

[boourns]

@almasakchabayev follow this comment: https://github.com/facebook/relay/issues/26#issuecomment-134767414

[almeynman]

@boourns It worked when I changed fetchWithRetries in 'function _sendQuery' to just fetch. Great! Thanks a lot!

[lukasreichart]

@boourns Maybe a dumb question: What do you mean by: "Commit relay's /lib directory since building dist failed (above)" ?

[boourns]

@lukasreichart

Ideally we would build relay against react-native, do a dist build which would result in a single relay.js file, which could be copied into the react-native project. The minimal changes to build relay against react-native are here: https://github.com/facebook/relay/commit/e0037c78931edc3286e5217894348ca8ece1225b

With that commit applied, the src to lib transpilation step succeeds, but doing a dist build of relay fails. See the screenshot posted in my original comment. So that commit is not sufficient in the long-term.

The proper solution will be to figure out why the dist build fails and making it not fail, but I don't really know what the problem is there yet.

In the meantime if you want to try relay with react native, the hack solution is to fork relay, apply https://github.com/facebook/relay/commit/e0037c78931edc3286e5217894348ca8ece1225b, commit /lib and then add that relay fork to your react-native project as an npm dependency. And then make the other changes I outline.

[lukasreichart]

@boourns Thanks you've directed me to the right path. But now I have a problem with the babel-relay-plugin. I'am using this script. But keep getting an Error: Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used varbatim asRelay.QL``

This error occurs when you use Relay.QL ( which should have been replaced by the babel-relay-plugin). The strange thing is, that in index.ios.bundle, all Relay.QLstatements have been replaced correctly.

Any ideas on this one?

[boourns]

@lukasreichart in package.json for your project change the start command to be:

"start": "node_modules/react-native/packager/packager.sh --transformer ./lib/babelTransform.js"

And then you need to run your react-native packager via 'npm start' instead of running react-native start or using the packager that xcode boots up.

This is another workaround we had to apply, not sure how to make this just gracefully happen yet.

[lukasreichart]

@boourns Would you mind sharing the content of your ./lib/babelTransform.js file?

[boourns]

Sorry, discussing with @jahfer now who did this portion of the work. Disclaimer again that this is hacks on hacks on hacks, not a robust solution to getting it working :)

What we did was copy the original react-native babel transformer from https://github.com/facebook/react-native/blob/master/packager/transformer.js into your project, and add the relay plugin:

    plugins: [require('./babelRelayPlugin.js')],

babelRelayPlugin.js comes from https://github.com/relayjs/relay-starter-kit

[lukasreichart]

I think my transform is working now. Thank you very much. @boourns
Getting a new Error: fetch is not a function which is very strange, because fetch is globally defined in react native(?).
Did you also encounter this error?

[boourns]

@lukasreichart yes, you need to follow this comment:
https://github.com/facebook/relay/issues/26#issuecomment-136176547

and this comment:
https://github.com/facebook/relay/issues/26#issuecomment-137116894

let me know how that works

[ide]

So to enumerate what needs to be done:

1. Relay's "react" dependencies need to be made compatible with "react-native". I've opened up https://github.com/facebook/react-native/issues/2985 to move RN to use "react" from npm so that any library that depends on React but not ReactDOM will work with RN. Relay's peerDependency on ReactDOM is only for the examples so we should be good there.
2. Need to drop the dependency on the "fetch" polyfill. My thinking is that fbjs should make the fetch polyfill optional (or exclude it altogether) and ask that the developer provide their own definition of global.fetch, similar to how most libraries don't bundle a Promise implementation because every developer has different needs.

Optional and desired:

1. Publish src to npm alongside libs and add an entry to package.json like "react-native": "src" that tells the RN packager to read from src. (This is currently unimplemented in the packager but I believe there are PRs out to add it. It is similar in spirit to the "browser" field.) It's much nicer when debugging to have the raw source files and to have full control over how they are transformed. Developers can easily load the Babel plugin via .babelrc.
2. Publish the Babel plugin separately if the RQL syntax and output are pretty stable and ready to be semver'd. If it is changing a lot with every Relay release then this doesn't yet make sense.

[boourns]

@ide thanks for the summary!

what about the ReactDOM require here?

https://github.com/facebook/relay/blob/master/src/container/RelayContainer.js#L24

[ide]

Good point. The injection should probably be moved out of RelayContainer since it's setting up the environment.

[zpao]

There's a bunch of other discussion about fetch in https://github.com/facebook/relay/issues/136 and https://github.com/facebook/fbjs/issues/60. I made https://github.com/facebook/fbjs/pull/61 as a result (uses isomorphic-fetch module). Though looking the comments above about RN, looks like the main issue about self not being defined won't be resolved. We could add global.self if it's not defined but that's not awesome… RN already has a fetch polyfill so maybe just saying that fbjs should depend on a global fetch function being available is ok.

[ide]

I'm 80ish% sure depending on a global fetch is the right solution since that's been a win when libraries do the same with Promise and users can address their own needs, whether that's using a custom Promises library like bluebird or selectively shipping a Promise polyfill only to browsers that don't natively support it.

My 20% reservation comes from the fact that fetch is not an ECMAScript standard so it doesn't make sense to expect Node to support it. That said, fetch is reasonable to polyfill on Node so asking users to define fetch and telling them about isomorphic-fetch is pretty pragmatic in my eyes.

[zpao]

Polyfilling the global in node is generally not smiled upon so we may have different opinions on "tolerable" :) It is pretty pragmatic though (and we could probably wrap it up with a warning in __DEV__ - still provide a fetch module in fbjs and when consumed it just exports global.fetch and warns if it doesn't exist)

[ide]

Mm good point... I was thinking more about the difficulty of writing the polyfill implementation (as opposed to, say, jsdom) than polluting the global scope. Another idea is to use the "browser" field in package.json (which RN's packager supports) to publish a different version of fbjs depending on the environment.

[taion]

@ide

By

use the "browser" field in package.json

Do you mean specifically "pull in node-fetch when running on Node, but do not polyfill fetch when running on browser and RN"?

Seems like the easiest way to accomplish that would be to modify node-fetch to use a no-op "browser" entrypoint and just import that in fbjs.

[ide]

The "browser" field also lets you override specific modules so I think you could write this in fbjs's package.json:

{
  "browser": {
    "fetch": "./native-fetch.js" // no-op
  }
}

[taion]

I like the idea of "bring-your-own-fetch" in browser and using node-fetch on Node.

However, it's worth noting that this is not consistent with the approach Relay is (implicitly) using for promises. By virtue of using babel-runtime... wait, no, why is Relay pulling in Promise from fbjs? Doesn't babel-runtime take care of this for you?

[josephsavona]

why is Relay pulling in Promise from fbjs?

@taion We're using some not-sure-why-they-aren't-standard Promise methods like done

[taion]

Going back to @ide's point from https://github.com/facebook/relay/issues/26#issuecomment-143511705, would it be reasonable to only polyfill fetch via node-fetch when running in Node, and letting the user bring his or her own fetch when running on the browser?

[gre]

I see that react-relay currently depends on [email protected] and react-dom. Shouldn't it just depend on only react in the future?
Then we also need to wait react-native to depends on that incoming react 0.14.0+ so this can be interoperable, right?

[kusamakura]

Anyone have had luck using relay with react-native 0.11.4 or 0.12.0-rc?

[almeynman]

@kusamakura you can clone https://github.com/almasakchabayev/relay, it includes node_modules and lib folder, works with 0.11, there were some problem with 0.12.

[gre]

@kusamakura I have Relay working with react-native 0.11.4 (see fork here: https://github.com/ProjectSeptemberInc/relay/commits/react-native ). I've followed @boourns tips tracked in this issue but also skipped all commits since Relay integrated ReactDOM : https://github.com/facebook/relay/commit/2d822400dbcf14f9636ab3149477f4ff0a0ee466 (so I'm based on the commit before it..)

This solution is temporary and is based on one month ago source code.

BTW in this last commit, @spicyj said that

Internally for RN, we'll shim ReactDOM as just {unstable_batchedUpdates: ReactUpdates.batchedUpdates}

I hope react-native compatibility will be addressed soon.

[chandu0101]

@almasakchabayev i am using u r node_modules and lib folders but i am getting following error while starting app!

Unable to resolve module immutable from myproject/node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js Unable to resolve module immutable from myproject/node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js

[almeynman]

@chandu0101 maybe the version of react-native in your app is 0.12?

[chandu0101]

@chandu0101 maybe the version of react-native in your app is 0.12?

hmm no , btw why my version matters here i am using u r node_modules lib folder ..(btw i am new to this js build tools/systems)

[chandu0101]

@gre
i am using your fork , while starting app i am getting following error

console.error: "Object is not a function (evaluating fetch(uri,init))"

[almeynman]

@chandu0101 In you app you require 'react-native' and 'relay'. I suppose the version of react-native, that you require and the version of react-native in relay should be the same. Not sure about your error, maybe try adding polyfill as suggested by @boourns

[chandu0101]

@almasakchabayev thanks for reply , i got it working by using @gre fork and your work around

when I changed fetchWithRetries in 'function _sendQuery' to just fetch.

[almeynman]

@chandu0101 Well done!

[gre]

also I forgot to say I'm using my fork like this:

relay.js

/* global process: true */
process = {env: {}};
require("react-native-browser-polyfill");
module.exports = require("react-relay");

( but that's basically quoting @boourns )

[kusamakura]

@almasakchabayev @gre Awesome, thanks! My problem was that I was using 0.12.0-rc for some Android bugfixes. 😭

[idibidiart]

I'm interested in it to replace a mobile BFF ('backend for front end', an API adaptation layer we wrote for our native mobile apps) which is a bottleneck in terms of development. React Native would have even more value to us it had GraphQL support out of the box.

I guess given @gre 's prototype, it would be safe to assume that we'll have GraphQL support in React Native at some point in the near future?

[gre]

Yeah Relay is very close to work with React Native, I guess it's mainly accidental that it doesn't work there, there are no strong dependency on React DOM as far as I know.
Anyway, let's hope React 0.14 will help the transition.

[stylesuxx]

Did anyone manage to get react-relay 0.4.0 working with react-native 0.12.0?
Tried to apply the suggestions from above to the new versions, but when I run the app on Android I get errors:

Requiring module "React" which threw an exception', [ModuleError: Requiring module "React" which threw an exception]
E/ReactNative( 8006): Got JS Exception: TypeError: undefined is not a function (evaluating 'ErrorUtils.reportFatalError(error)')

[skevy]

So, I just made this work in a reusuable way yesterday for my team, and I thought I would post the steps I took (these are for the current master branch of RN):

1) Make sure that instead of importing "react", Relay is importing "react-native". This is super temporary change that won't be needed once https://github.com/facebook/react-native/issues/2985 is resolved. I did it through the build process in react-relay.

2) FBJS fixes: There are two, as has been discussed.

The first is:

This happens, as far as I can tell, because of RN's packager dependency resolver. The resolver doesn't respect nested requires, and simply searches all files for "require" statements and tries to resolve those deps. In this case, in the asap library, on line 81 of raw.js, it's requiring a module called domain. This doesn't apply in the RN context, but the RN packager chokes (and now throws hard errors, vs. a couple weeks ago when it would just throw in the console and could be ignored). The only way to fix this at the moment is to comment out that require. I've opened an issue in RN to discuss this: https://github.com/facebook/react-native/issues/3463

The second issue is the FBJS fetch polyfill (as has been discussed).

The fetch polyfill looks like this:

/**
 * Copyright 2013-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule fetch
 */

'use strict';

require('whatwg-fetch');
module.exports = self.fetch.bind(self);

It would be great if we could replace it with something like this:

var fetch;

if (!global.fetch) {
   require('whatwg-fetch');
   fetch = self.fetch.bind(self);
}

module.exports = fetch;

This way, there wouldn't really need to be any updates to how Relay uses fetch, and could instead be fixed in fbjs.

However, this fails for two reasons, the first being the aforementioned RN packager issue where it doesn't respect conditional require's. The second reason has something to do with how @providesModule works, as this file is only loaded on RN when I remove the @providesModule directive from the top comment. Not completely sure why or how this works.

3) ReactDOM dep for unstable_batchedUpdates.

To fix this issue, you have to change ReactDOM.js (in the react package) to be the following:

/**
 * @providesModule ReactDOM
 */

'use strict';

var ReactUpdates = require('./ReactUpdates');

// Temporary shim required for Relay.
var ReactDOM = {
  unstable_batchedUpdates: ReactUpdates.batchedUpdates,
};

module.exports = ReactDOM;

I'm not sure what the right way forward on this is.

RN makes this method available under the ReactNative module...but since Relay needs this method and it's platform dependent, it would require Relay to somehow do execution environment detection. I'm not sure what FB's plan is to resolve this going forward.

---

Anyway, just wanted to summarize my findings here. Hope this helps people in the interim while these internal problems are fixed.

[gre]

@skevy do you have a ready-to-use fork somewhere?

[brysgo]

It's a bit more complicated than that. He told me offline and I got it set up. You need facebook/react-native#3625 skevy/relay#react-native and skevy/fbjs#react-native

[boourns]

I've got a ready-to-use fork here: https://github.com/Shopify/relay

Currently using it against react-native 0.11 release (while we deal with an integration test / packager issue preventing us from upgrading to 0.13)

[skevy]

@brysgo is correct, it's a bit involved and needs those forks. FBJS and Relay need to be installed from a local Sinopia or the like, as FB npm ignores "src". Also, it differs from the Shopify fork as it works with RN master (well, my fork of RN master, which was up to date as of last Thurs, and includes a packager PR that I submitted https://github.com/facebook/react-native/pull/3625)

[tlvenn]

Is it likely that React Native v0.14.0-rc will have a better story out of the box ?

[skevy]

@Tlvenn unfortunately no. Probably not till RN 0.15 at least.

[jeromecovington]

Can this be closed? Watching this here - https://code.facebook.com/videos/931163756933706/f8-2015-react-native-and-relay-bringing-modern-web-techniques-to-mobile/ - gives the impression that relay is working in conjunction with react native.

[skevy]

@jeromecovington we cannot close this until the problem, as described by all of the preceding comments, is fixed. That video you reference was released before Relay was even open-sourced.

Will Relay _eventually_ work with React Native out of the box? Absolutely. Does it right now? Absolutely not.

[jeromecovington]

@skevy - understood, and thanks for the clarification.

[taion]

That video just shows that Relay + RN works for Facebook :D Less so the rest of us.

[shishircc]

Do we have any tentative release number planned for RN support out of the box ?

Is there any workaround to get it working in meanwhile ?

[mrlaessig]

For me the workaround provided by @skevy works well with RN 0.13.0 and Relay 0.4.0.

[lenaten]

I opened a repo with react-native init equivalent project, with relay support, based on @skevy work. https://github.com/lenaten/react-native-relay.

[shishircc]

Thanks @skevy , @lenaten and @l-urence !

[gmochid]

@lenaten I've already run your project, but I got this error when I open the android application Unable to download js bundle. Did you forget to start the development server or connect your device? even though I had already started the react-native packager webserver.

Is there any workaround with this? By the way, I am using react-native cli version 0.1.7

[brysgo]

@gmochid - Doesn't sound like a relay problem. Make sure you follow the on device instructions and run a reverse proxy through adb.

[lenaten]

@gmochid, Actually I found few more steps to do before get relay working:

• Add babelRelayPlugin.js to project and add it to plugins array in node_modules/react-native/packager/transformer.js.
• Add schema.json generated by relay's update-schema script to project, and add reference to it in babelRelayPlugin.js.
• Use npm install -g [email protected] instead of npm install -g react-native-cli.
• Modify /usr/local/bin/react-native script to download [email protected] instead of the latest version, and then run react-native init again.
• Since you don't run your graphql server in iphone/android, be sure you set your graphql server address in index.<android/ios>.js, for example:

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://192.168.62.1:8080/graphql')
);

Now I get relay working perfectly with android and iphone.
I pushed this changes to my repo and update the readme instructions.
Please let me know if there are more issues.

[shishircc]

@lenaten I get issue saying that index.os.js could not be found. (only thing I have not done is run the react-native init again because the clones app already points to react native 0.13 (can init be run on existing project?))

[lenaten]

@shishircc can you please start a clean project as described in my updated repo, and add your existing code after that.
There are many things that can go wrong...

[shishircc]

thanks @lenaten , the iOS app is now successfully running. Your repository is very useful !

[shaikhussian]

@lenaten when i clone your repo and try to run it, i am getting an error alert in xcode, like this

[shishircc]

Did you use git clone command ? Or did you download the code from github ?

When I used git clone, I did not get this warning

[lenaten]

@shaikhussian Go to System Preferences, then to Security & Privacy and set “Allow applications downloaded from:” to Anywhere.

[shaikhussian]

@shishircc @lenaten did i need to add any extra like webpack.config.js file and babel, why because when i clone and try to run it i got an error like this:

even i installed babel-relay-plugin

[lenaten]

@shaikhussian Please open new issues in react-native-relay repo.
BTW, do you have a valid schema in react-native-relay/data/schema.json?

[shishircc]

@shaikhussian

Yes, I got that too. That's expected. This is because this kit is only for
UI and has a empty data schema file. Also It does not include the graphql
backend server.

What I did was get the relay starter kit from github, npm install it and
npm start it.

Copy the schema file from it to the react native relay data folder

Change the url in index.ios.js to point to local host port for the graphql
server

I am in process of doing this. So I will post more details once I am done.

On Tuesday, 24 November 2015, shaikhussian [email protected] wrote:

@shishircc https://github.com/shishircc did you add any extra like
webpack.config.js and babel, why because when i clone and try to run it i
got an error like this:
[image: ios simulator screen shot 24-nov-2015 6 17 30 pm]
https://cloud.githubusercontent.com/assets/11956308/11367163/ebd9688a-92d7-11e5-9e7b-8546490b7ea5.png

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

[trbngr]

Can someone post a very simple RN app using Relay? For whatever reason, I can't get anything to render.

[lenaten]

I just added usage example, please give it try.

[trbngr]

@lenaten Thanks a million! Everything is perfect.

[gmochid]

@lenaten works like a charm on ios. thank you very much.

But I got an issue on Android, it shows only white screen. I am using emulator Google Nexus API 22 on genymotion.

[lenaten]

@gmochid Find the network interface name in:
VirtualBox -> [Your Android VM] -> Settings -> Network -> Adapter [N] Attached To Host Only Adapter -> Name.
Find the IP address with ifconfig command, then replace the localhost string in config.js with the IP address.
It's should work in android and ios.

[lenaten]

@shaikhussian if you can't access this url via browser and see the Graphiql interface, it's a sign for a mistake in the deployment process.. Actually the config need to point to http://development.myappdemo.net:3003/graphql, which display "Reset your FitVite Password here.."....

[shaikhussian]

@lenaten just now i change it, till now it directly redirect into forgot password page, now i changed forgot password url and till now i didn't included Graphiql code into my project.
Just now i checked it in xcode, it shows like this:'fetchWithRetries(): Still no successful response after 1 retries, giving up.'
but in simulator it shows black white screen
in config.js
export default config = {
graphqlURL: "http://development.myappdemo.net:3003/graphql",
}

[lenaten]

@shaikhussian I would happy to help, but please continue react-native-relay related discussions in https://gitter.im/lenaten/react-native-relay or open a new issue.

[chandu0101]

anyone have working patch for 0.16.0-rc( it supports stateless functions :sunglasses: ) ?

[rricard]

Working on 0.16. Not managed to get it work for now, still stuck on the very cryptic error message:

TypeError: undefined is not an object (evaluating 'GLOBAL.Text={...

[rricard]

Otherwise here's what I did (on this branch of this example project I'm trying to update: https://github.com/rricard/MobileSync/tree/reac_native_update):

1. patch fetch in fbjs
2. create react and react-dom packages in node_modules redirecting to react-native
3. now, I'm trying to figure out why the global context object (this) is always undefined.

[zuhair-naqvi]

+1 resolving this will be incredibly beneficial to RN projects @vjeux @mkonicek @nicklockwood any work happening in RN to make Relay integration easier? We're deciding whether to use Relay for a product which is going to be huge in Australia .. This one issue is holding us back!

[shishircc]

I suggest using this as starting point. It works out of box. It has
modified version of RN and relay which work well together.

https://github.com/lenaten/react-native-relay.

Read the repository readme for more information

On 15 December 2015 at 12:17, zuhair-naqvi [email protected] wrote:

+1 resolving this will be incredibly beneficial to RN projects @vjeux
https://github.com/vjeux @mkonicek https://github.com/mkonicek
@nicklockwood https://github.com/nicklockwood any work happening in RN
to make Relay integration easier? We're deciding whether to use Relay for a
product which is going to be huge in Australia .. This one issue is holding
us back!

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

[mpretty-cyro]

@shishircc Unfortunately https://github.com/lenaten/react-native-relay only works against React Native 0.13.0 which doesn't work with React 0.14!

We attempted to get it to work against 0.16.0 because the rest of our stack uses React 0.14 but haven't been able to get it running thus far... ;_;

[zuhair-naqvi]

^ :sob:

[gre]

@zuhair-naqvi this is what RN team is working on: https://github.com/facebook/react-native/issues/2985

in the meantime, maybe Relay could use this workaround? https://github.com/facebook/react-native/issues/2985#issuecomment-162483264

(see also https://productpains.com/post/react-native/react-native-to-depend-on-react/ )

[filod]

@rricard seems when i require react-relay, the whole javascript env will be broken. react-relay use fbjs overrides the fbjs which react-native uses, this cause conflicts in Promise, fetch..etc.. (don't know how to fix this :disappointed: )

[rricard]

I don't know but by adding libs one by one, react-relay is not the first offender, the babel-relay-plugin seems to break it alone. I don't exactly know how the react packager works but if we could exclude some paths from being taken in account in the haste map, that could make a difference. Having facebook/react-native#2985 resolved will improve the situation but not fix it magically either I think. I'll see what I can do to help when I have some time for that but I personally can't work with RN with this issue without at least a workaround.

[rricard]

Something weird seems to happen with RN 0.16 in the scope when importing some packages in your node_modules. Note that you don't need to import one of the offending packages in your entry point (I reused the entry point from the template to conduct those tests) to see RN fail.

[skevy]

I have Relay working on RN master (as of 4 days ago, at least) with the following forks (which are just updated versions of the earlier branches I've mentioned in this thread):

https://github.com/skevy/react-native/commits/skevy-latest
https://github.com/skevy/relay/tree/react-native-at-master
https://github.com/skevy/fbjs/commits/react-native-at-master

(apologies for the crappy branch naming...we have multiple apps using different versions of rn...so it's kind of a mess at the moment. Working on cleaning it up).

[skevy]

All of my commits are rebased on top of those forks...so it should be easy to see the things that were changed to make it all work. And FWIW, we're using these in three apps in production.

[skevy]

Oh, and to get Relay's babel plugin to work...I used a custom transformer.js (which is just a copy of RN's transformer.js), and you can see the only thing it really adds is requiring the Relay plugin.

https://gist.github.com/skevy/1a814befb036b98b30d2

This is kind of a hacky solution, and the real solution is to make it so that the RN packager correctly uses your projects babelrc...but I just haven't had time to work on PR for that yet.

[skevy]

Also, to echo @gre, I can assure you all that it's high on the RN team's priority list to get Relay (and other libs that depend on react but not react-dom) working without forking all this stuff.

[rricard]

Wow cool! Will try !

On 15 Dec 2015, at 17:58, Adam Miskiewicz [email protected] wrote:

I have Relay working on RN master (as of 4 days ago, at least) with the following forks (which are just updated versions of the earlier branches I've mentioned in this thread):

https://github.com/skevy/react-native/commits/skevy-latest
https://github.com/skevy/relay/tree/react-native-at-master
https://github.com/skevy/fbjs/commits/react-native-at-master

(apologies for the crappy branch naming...we have multiple apps using different versions of rn...so it's kind of a mess at the moment. Working on cleaning it up).

—
Reply to this email directly or view it on GitHub.

[filod]

:+1:

@skevy Great job! can we use your packages directly ? (maybe in npmjs.org)

[skevy]

I publish to an internal sinopia/npm on-site installation. I would recommend sinopia (especially if you're just a single person or a small team), as it's super easy to get running on your local machine. You can even use docker: https://github.com/RnbWd/sinopia-docker

[rricard]

You can also point to the fork via git https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

[skevy]

Unfortunately, with both fbjs and relay, you can't do that, because the built versions of the src are not checked into git.

[rricard]

Well, we could still trigger the prepublish hook for those repos as a postinstall hook right ? I'll try!
If it works, I'll make a gist.

[taion]

That's usually a tricky route to go down - unless your set of build dependencies is relatively small, you just end up failing on the missing build dependencies for most users.

[rricard]

Yea, I know people should indeed be aware that using a private npm repository is safer but it usually does the trick, so yea, only do this if you only need like only RN & Relay

[rricard]

It's not possible anyway to do like that due to the relationship between fbjs and react-relay. Use a private NPM !

[theodorton]

I've set up a private npm and I've published three packages based on @skevy's branches, but since the packages are scoped to my organization (@org/fbjs, @org/react-relay, @org/react-native) I'm having a hard time with require as I have to do require("@org/fbjs") instead of require("fbjs").

I'm new to the whole private npm world, so I'm probably doing something wrong.

Any hints to how I can avoid this?

[JNK]

@theodorton I believe you can just name the packages differently (without your namespace as it's your private registry) and push those

[theodorton]

I think I got private/scoped packages from npmjs.com confused with a privately hosted npm registry. I'll look into sinopia.

[JNK]

I assumed you had setup a private sinopia repo, sorry :smile:

[zuhair-naqvi]

@mpretty-homepass check this out!

[filod]

@skevy

hi, as you suggest, i setup my own sinopia, and publish the package.

but now, i can not even start an empty app, i got this error:

 stack: Error: Requiring unknown module "InitializeJavaScriptAppEngine". If you are sure the module is there, try restarting the packager.
    at requireImpl (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:48:7)
    at requireImpl (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:34:25)
    at require (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:26:8)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true:1240:2
    at messageHandlers.executeApplicationScript (http://localhost:8081/debuggerWorker.js:18:5)
    at DedicatedWorkerGlobalScope.onmessage (http://localhost:8081/debuggerWorker.js:33:5)
 line: undefined
 message: Requiring unknown module "InitializeJavaScriptAppEngine". If you are sure the module is there, try restarting the packager. Error: Requiring unknown module "InitializeJavaScriptAppEngine". If you are sure the module is there, try restarting the packager.

any hint on this ?

---

sorry ， seems forgot to AppRegistry.registerComponent will cause this. now i can use relay, thanks again !

[mpretty-cyro]

@skevy Thank you so much, I managed to get your fork's working using Sinopia and the list @lenaten mentions here https://github.com/facebook/relay/issues/26#issuecomment-159192009

[lenaten]

@mpretty-homepass can you push your working project with the node_modules directory to the repo at https://github.com/lenaten/react-native-relay. It's could be useful to many people and save their time and efforts.

[mpretty-cyro]

@lenaten no problem, I've just created a pull request, not exactly ideal as I'm quite new to npm & react so you could probably ditch a bunch of npm modules I committed to the repo (I tried removing them for the commit but running 'npm install' afterwards seemed to break the fixes).

[mpretty-cyro]

Just FYI for anyone who was going to use my updated fork - it looks like it's not working on Android yet.

[chandu0101]

This should also allow relay to work seamlessly with RN, but I haven't verified this.

https://github.com/facebook/react-native/commit/6a838a4201f99ae5e88b3684bb798d363815dd53

[skevy]

For all those people tracking this issue:

Following the https://github.com/facebook/react-native/commit/6a838a4201f99ae5e88b3684bb798d363815dd53, I have submitted several PR's that do the remaining work to get Relay working out of the box with React Native.

They are as follows:

React Native:
https://github.com/facebook/react-native/pull/5084 - Removes fbjs knowledge from the packager, allowing for Relay to not choke on weird problems from requiring fbjs.
https://github.com/facebook/react-native/pull/5097 - Updates Babel to the latest version, to avoid issues with the Babel Relay Plugin.

FBJS
https://github.com/facebook/fbjs/pull/95 - Does the things required by https://github.com/facebook/react-native/pull/5084

Relay
https://github.com/facebook/relay/pull/713 - Adds React Native compatibility by removing ReactDOM dependency.
https://github.com/facebook/relay/pull/714 - Makes the Babel Relay Plugin run before other transforms, so that there's no issues when using it from a nested .babelrc (such as in React Native).

_Note: some of the PR's are RFC's, and they make take a while to get reviewed, updated and merged. But when all of these are merged, and released, in some form, Relay will work out of the box in React Native_

[BerndWessels]

@skevy Thank you so much. Would be great if you could post here once it all has been merged and released.

[tmitchel2]

Is this complete?

[mikberg]

@tmitchel2 waiting for facebook/react-native#5084 and facebook/react-native#4062 it seems

[tlvenn]

Additionally the following need to be fixed in Relay as well: c0e6da5cca5ea71dd739f5200da2e6c0cd4a95b5

[shahankit]

@lenaten @skevy Have you tried using decorators with patched react-native, relay. I couldn't use it even after whitelisting es7.decorators in .babel.json.

[shahankit]

Got it working by installing babel-plugin-transform-class-properties

[BobertForever]

So from the last few messages in this thread it sounds like it's not exactly working out of the box quite yet. Would it be possible to get this reopened to track when it is finished, if that's the case?

[ugputu18]

Also have a problem with relay and react-native packager. Just trying to add relay package to master-version of react-native and run packager/packager.sh --resetCache. And I'm getting an error:

Failed to build DependencyGraph: Naming collision detected: /Users/ugputu/ws/play/react-native/node_modules/react-relay/node_modules/fbjs/flow/include/warning.js collides with /Users/ugputu/ws/play/react-native/node_modules/react-relay/node_modules/fbjs/lib/warning.js

Same problems with the stable version of react-native (0.19.0). Is it going to work?

[BerndWessels]

Following relay closely and using it in my web projects I still see too many moving parts and assume we have to wait until a 1.0 release before its worth the effort integrating it with react-native. That is most likely why there is not much momentum from "official" side to get this working for now.

Maybe its better to help get relay to a decent state before integrating it into react native. Otherwise the frustration about a half baked constantly breaking solution might become to big.

[boourns]

either way this issue should be reopened as the bot closed it prematurely /cc @josephsavona

[josephsavona]

Reopening since this was closed accidentally by the bot.

We really appreciate everyone's patience on this issue. At this point most of the work to enable React Native compatibility in open source is now complete. The main outstanding aspect is the babel configuration - #714. We plan to test and document the config settings before announcing official compatibility and closing this issue.

[boourns]

thanks @josephsavona!

[pthrasher]

@BerndWessels Quite the contrary. There's a lot of momentum from the "official" side. As @josephsavona has just said, there's only one issue left. There were a lot of PRs and a lot of back and forth that went into this. It was a substantial effort with lots of work put in both officially, and unofficially.

[josephsavona]

@pthrasher thanks! :-)

[steveluscher]

Thanks for your patience on this, @BerndWessels. I've been working all week to land a few last PRs across the ecosystem that will let us use Relay in React Native projects. I'll keep chipping away at this iceberg along with @skevvy, @davidaurelio, and many others until it's done!

[idibidiart]

No more custom REST layer for mobile a la Backend For Frontend (BFF). "One data model everywhere" is all we need.

[idibidiart]

Waiting with excitment!

[BerndWessels]

@pthrasher @steveluscher @josephsavona thanks for all your effort.
Sometimes it is hard to see what is going on behind the scenes just from following the Git Issues.
I believe Relay is the way to go and being able to use it in web and mobile will clean up my code base a lot.
Looking forward to it.

[faceyspacey]

what is the prescribed way to try this out until the "official" release is ready?

[note89]

@faceyspacey i used this repo https://github.com/lenaten/react-native-relay and i got it working

[geekgonecrazy]

@skevy are we just waiting on these two PRs ?

https://github.com/facebook/react-native/pull/5084
https://github.com/facebook/relay/pull/714

Looks like the others are closed or merged.

[bcarroll22]

Any update on this?

[josephsavona]

@bcarroll22 everyone is pretty busy with React Conf this week; we'll update this issue as soon as we make progress.

[bcarroll22]

thanks!

[eugenehp]

a zoo of fbjs versions for current npm releases. @josephsavona

[pthrasher]

Looks like facebook/react-native#5084 just dropped. Only item left is #714.

[idibidiart]

After much research and dialog with the community, I feel this captures the essence of why this would be so significant for React Native: https://gist.github.com/idibidiart/49a095b6bc528638f34f

Sorry, to put this into the Issues log, but I'm hoping others who come here randomly and have no idea why this matters so much could benefit from the aforementioned dialog. Thanks for all the hard work and for giving the React Native community so much love!

[jefferyvincent]

Looks like #714 is closed finally.

[note89]

@jefferyvincent NAJZ!

[vespakoen]

Working on supporting this natively: https://github.com/facebook/node-haste/pull/46

[antonsivogrivov]

Awesome! And what about fbjs and so on?

[siderakis]

If this is basically ready could someone post a short description of how to get it set up. (PS, great work everyone, this is so exciting!)

[steveluscher]

I'm working on a React Native example app for /relay/examples/ right now.

[taion]

Can you cut a new release first so we can use Relay with the latest Babel 6? (:

[steveluscher]

Typing as fast as I can.

[mpretty-cyro]

@skevy awesome job getting everything up and running.

I've just tried pulling the latest code from RN master, installed react-relay 0.7.3 and setup the .babelrc as per https://github.com/facebook/relay/pull/714 but I still seem to be running in to issues (see screenshot), not sure if I'm missing a step that I couldn't see in the thread. Any thoughts? (was hoping to be able to try converting from redux to relay this weekend).

[mrlaessig]

Same here. It was working with my previous RN 0.21.0 fork in which I merged https://github.com/facebook/react-native/pull/5084 by my self. I noticed that the fbjs stubs are missing from the https://github.com/facebook/react-native/pull/5084 PR. I tried everything from here https://github.com/facebook/react-native/issues/4968 multiple times without any effect.

[steveluscher]

Things are moving really fast here as we try to bring Relay and React Native together. Does your latest install of react-native have this commit? https://github.com/facebook/react-native/commit/54b6b925203d43eadb36e6960aa7efe50ad6a102

[mpretty-cyro]

@steveluscher I actually managed to get it running and yea that's pretty much what I had to do (I re-applied the blacklist changes from here https://github.com/facebook/react-native/commit/ad8a33586410c6f9048983f64f8f86e0715e73b8 also removing the fbjs/Map one which seems to be what that commit does). I also had to remove the 'Libraries/vendor/core/isEmpty.js' and 'Libraries/vendor/core/Map.js' files then it started working (though not sure if this is needed).

Must have pulled the latest changes to master just before that commit came through.

cc @l-urence

[mrlaessig]

I agree with @mpretty-homepass. After rm -rf node_modules and npm install with latest RN from https://github.com/facebook/react-native (including https://github.com/facebook/react-native/commit/54b6b925203d43eadb36e6960aa7efe50ad6a102 commit) RN + Relay 0.7.3 are running fine as far as I can see. Thx guys!

[antonsivogrivov]

But I have still the same :(

Failed to build DependencyGraph: Naming collision detected: {project_folder}/node_modules/react-relay/node_modules/react/node_modules/fbjs/lib/warning.js collides with {project_folder}/node_modules/react-native/node_modules/fbjs/lib/warning.js

Error: Naming collision detected: {project_folder}/node_modules/react-relay/node_modules/react/node_modules/fbjs/lib/warning.js collides with {project_folder}/node_modules/react-native/node_modules/fbjs/lib/warning.js

My package.json:

"dependencies": {
"babel-relay-plugin": "^0.7.3",
"react": "^0.14.7",
"react-native": "^0.21.0",
"react-native-date": "^1.0.3",
"react-native-material-kit": "^0.3.0",
"react-native-router-flux": "^2.3.6",
"react-native-scrollable-tab-view": "^0.3.8",
"react-relay": "^0.7.3"
}

[mrlaessig]

@tonygriv You should try to install RN from github repo. Change your package.json to:

"dependencies": {
  "babel-relay-plugin": "^0.7.3",
  "react": "^0.14.7",
  "react-native": "facebook/react-native",
  "react-native-date": "^1.0.3",
  "react-native-material-kit": "^0.3.0",
  "react-native-router-flux": "^2.3.6",
  "react-native-scrollable-tab-view": "^0.3.8",
  "react-relay": "^0.7.3"
}

and maybe reinstall all node_modules.

[antonsivogrivov]

@l-urence, ok, thanks, it works.

And how to set up a babel transform for it? I have an error:

Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identity this call site. Make sure it is beign used varbatim asRelay.QL.

According to this comment https://github.com/facebook/relay/pull/714#issuecomment-181204627, I tried to set up this, but something went wrong.

[mrlaessig]

@tonygriv This setup works for me:

babelRelayPlugin.js:

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema');

module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

.babelrc:

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

[siderakis]

I'm using:
package.json

"dependencies": {
  "babel-relay-plugin": "^0.7.3",
  "react": "^0.14.7",
  "react-native": "facebook/react-native",
  "react-relay": "^0.7.3"
}

babelRelayPlugin.js:

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema');

module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

.babelrc:

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

and seeing the error message:

node_modules/react-native/Libraries/react-native/react-native.js:120
  ...require('React'),
  ^^^

SyntaxError: Unexpected token ...

Any ideas? I'm guessing I need to update the babel configuration, or something.

babel --version is 5.8.35 (babel-core 5.8.35)

[antonsivogrivov]

@siderakis, try npm i babel --save-dev (not global). I think it needs babel 6+.

@l-urence, problem is still present:

Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identity this call site. Make sure it is beign used varbatim asRelay.QL.

[josephsavona]

@tonygriv That error indicates that the Babel plugin isn't correctly configured. Either it isn't being run at all, or some other plugin (probably the React Native one) is executing first and removing the Relay.QL tagged template expressions so babel-relay-plugin can't find them.

[siderakis]

Wow, you guys are responsive!

https://github.com/facebook/react-native/commit/f9b744d50137de25357994fe2e829f98104e2242

I'm looking into included the webpack loader as explained in the linked comment. Any pointers would be appreciated.

[steveluscher]

I ran into almost all of the problems you've reported above, while building the forthcoming Relay / React Native example app. In addition to running all of the latest versions of React Native and Relay and using NPM 3, my .babelrc presently looks like this (requires Babel 6.5+):

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

[mrlaessig]

@steveluscher have you tried running RN + Relay with chrome debugging enabled? I get "Unexpected end of input". With debugging disabled or the Relay specific code commented out all works fine. Are you running Relay form npm or latest from github?

[steveluscher]

EDIT: Oh… I just read your comment more carefully. I didn't realize that this worked with Chrome debugging disabled. That's an excellent clue as to what's gone wrong. Thanks! cc/ @shayne @davidaurelio

Yes. That's the next thing we're working on. It looks like fetch() (used by Relay's default network layer) is broken in RN. The fetch promise resolves with no content, so the JSON parser chokes (JSON.parse('')).

In the meantime, I might have to write a network layer that uses XMLHttpRequest.

[antonsivogrivov]

About Unexpected invocation at runtime error. I rm -rf node_modules, clear npm cache and npm install ones more. Everything looks good.

[mrlaessig]

@steveluscher Thx! It works with a custom network layer using XMLHttpRequest.

[steveluscher]

Just filed the Fetch API bug here: https://github.com/facebook/react-native/issues/6326

[mpretty-cyro]

@steveluscher Just wanted to let you know I pulled the latest from master and re-installed the modules and it now works without any changes.

Also, for anyone who is interested, https://github.com/relay-tools/relay-local-schema will work if you make a few minor changes to graphql-relay to support react-native (give me a yell if anyone wants the changes required).

[siderakis]

After updating package.json with "react-native": "facebook/react-native" running the command pod install gives the following error:

Fetching podspec for RNVectorIcons from ../node_modules/react-native-vector-icons
Fetching podspec for React from ../node_modules/react-native
Fetching podspec for react-native-fbsdkcore from ../node_modules/react-native-fbsdkcore
Fetching podspec for react-native-fbsdklogin from ../node_modules/react-native-fbsdklogin
Fetching podspec for react-native-fbsdkshare from ../node_modules/react-native-fbsdkshare
[!] Unable to satisfy the following requirements:

• React/Core (from../node_modules/react-native) required by Podfile

[jefferyvincent]

The fbjs issues seem to be resolved now. However, I am still running into issues with react-native and babelRelayPlugin after updating my package.json.

Here is what the code looks like:

package.json:

 "name": "relayNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-relay-plugin": "^0.7.3",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react": "^0.14.7",
    "react-native": "facebook/react-native",
    "react-relay": "^0.7.3"
  },
  "devDependencies": {
    "babel": "^6.5.2"
  }
}

.babelrc:

option A:

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

option B:

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

babelRelayPlugin.js:

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../data/schema.json');

module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

NPM Errors
If I run npm start I get the following issue:

.babelrc option A:

/node_modules/react-native/node_modules/babel-core/lib/transformation/plugin.js:127
      throw new Error(messages.get("pluginInvalidProperty", loc, i, key));
      ^
Error: Plugin 0 specified in "foreign" provided an invalid property of "plugins"

.babelrc option B:

/node_modules/react-native/Libraries/react-native/react-native.js:120
  ...require('React'),
  ^^^

SyntaxError: Unexpected token ...

Which option of the .babelrc is correct (A or B)? Also, is the 'start' within the package.json correct? Thanks! JV

[siderakis]

I believe option A shows that error because babelRelayPlugin.js exports { plugins: [getBabelRelayPlugin(schema.data)] }; , so it has two levels of plugins:

{
  "presets": [
    { "plugins": [{ plugins: [getBabelRelayPlugin(schema.data)] }]},
    "react-native"
  ],
  "passPerPreset": true
}

To confirm you could try module.exports = getBabelRelayPlugin(schema.data); with option A.

I'm also stuck with the same error while using option B.

[jefferyvincent]

Here's the results:

.babelrc using option A:

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

babelRelayPlugin.js updated:

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../data/schema.json');

module.exports = getBabelRelayPlugin(schema.data);

Running npm start:

/node_modules/react-native/Libraries/react-native/react-native.js:120
  ...require('React'),
  ^^^

SyntaxError: Unexpected token ...

Confirms that using:

module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

within the babelRelayPlugin.js is incorrect as @siderakis pointed out.

[siderakis]

Has anyone resolved this issue?

/node_modules/react-native/Libraries/react-native/react-native.js:120
  ...require('React'),
  ^^^

SyntaxError: Unexpected token ...

Also, if I remove .babelrc I don't get this error anymore. (but I still get errors further down the process).

[jefferyvincent]

I've played around with that file by changing the spread operator on line 120 to:
get React() { return require('React'); },

and that leads to the following error:

/node_modules/react-native/Libraries/react-native/react-native.js:122
if (__DEV__) {
    ^

ReferenceError: __DEV__ is not defined

And down the rabbit hole we go. I am not sure why a spread operator is used like that there.

[mrlaessig]

Have you tried to install RN 0.22.0-rc? Should work out of the box with Babel configured like this:

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

[jefferyvincent]

@l-urence I just tried to use RN 0.22.0-rc and here are my results:

package.json

{
  "name": "testApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-relay-plugin": "^0.7.3",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react": "^0.14.7",
    "react-native": "0.22.0-rc",
    "react-relay": "^0.7.3"
  },
  "devDependencies": {
    "babel": "^6.5.2"
  }
}

.babelrc

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

babelRelayPlugin.js:

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../data/schema.json');

module.exports = getBabelRelayPlugin(schema.data);

running npm start and receiving the following error:

> node node_modules/react-native/local-cli/cli.js start

module.js:341
    throw err;
    ^

Error: Cannot find module 'slash'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/node_modules/babel-core/lib/util.js:45:14)

Does your package.json differ from mine?

[oblador]

@jefferyvincent: You are using babel-preset-react in your package.json when you should be using babel-preset-react-native.

[jefferyvincent]

Thanks @oblador, but I am still seeing the same error above even after deleting my node_modules folder and running npm install and npm clear cache.

package.json updated:

{
  "name": "testApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-relay-plugin": "^0.7.3",
    "babel-preset-react-native": "^1.5.2",
    "react": "^0.14.7",
    "react-native": "0.22.0-rc",
    "react-relay": "^0.7.3"
  },
  "devDependencies": {
    "babel": "^6.5.2"
  }
}

Error:

> [email protected] start /projects/testApp
> node node_modules/react-native/local-cli/cli.js start

module.js:341
    throw err;
    ^

Error: Cannot find module 'slash'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/node_modules/babel-core/lib/util.js:45:14)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)

[oblador]

@jefferyvincent: That _should_ work, try resetting some caches like rm -fr $TMPDIR/react-* and killing watchman with watchman watch-del-all.

[jefferyvincent]

@oblador: I ran those commands and restarted and I still end up with that same error. No idea what Error: Cannot find module 'slash'?

[oblador]

@jefferyvincent: This sounds like NPM 3 troubles, try switching to NPM 2 or just installing slash manually and moving it to the babel-core's node_modules folder.

[jefferyvincent]

Bingo! Thanks @oblador that did the trick. I ran sudo npm install slash

[taion]

Given the number of subscribers to this issue, it might be best to limit discussion to just issue-related topics, rather than support. This is generating a lot of noise.

[jefferyvincent]

@taion, I was merely trying to properly document the above steps more clearly, since there were some discrepancies as to how the .babelrc file should be written. With that said, my comments above due constitute as issue-related. ;)

[steveluscher]

We shouldn't have to keep this thread open much longer. https://github.com/facebook/relay/pull/929

[steveluscher]

I just checked out a fresh copy of Relay from master, and did the following:

cd examples/TodoMVC/
npm install -g react-native-cli && npm install
react-native run-ios & npm start

A wild React Native and Relay app appeared.

Countless thanks to @skevy, @boourns, @gre, @davidaurelio, @martinbigio, @zpao, @spicyj, and everyone on this thread who helped us tear down the barriers to using Relay with React Native in the open source community. I can't wait to field all of your React Native specific GitHub issues.

We're done here. Open new issues at https://github.com/facebook/relay/issues or https://github.com/facebook/react-native/issues as you discover them!

[martinbigio]

Awesome work @steveluscher!

[filod]

:tada:

[tychota]

(Edited : I will found help on discord)

:tada:

[davidaurelio]

@steveluscher awesome work!

[eugenehp]

@steveluscher :+1:

[gmochid]

@steveluscher Great