Support react-native

[ortutay]

I am going through the tutorial and I hit an error when I try to connect to the local websocket server from my React Native app. The error is:

Error: Buffer is not defined
 stack: 
  Function.<anonymous>                                         index.ios.bundle:64324
  Function.module.exports.varar [as expr]                      index.ios.bundle:58951
  Table.<anonymous>                                            index.ios.bundle:61785
  Table.RDBOp [as constructor]                                 index.ios.bundle:61791
  new                                                          index.ios.bundle:62148
  Function.<anonymous>                                         index.ios.bundle:64402
  Function.module.exports.aropt [as table]                     index.ios.bundle:58972
  React.createClass.componentDidMount                          index.ios.bundle:1493
  CallbackQueue.assign.notifyAll                               index.ios.bundle:6674
  ReactNativeReconcileTransaction.ON_DOM_READY_QUEUEING.close  index.ios.bundle:16780
  ReactNativeReconcileTransaction.Mixin.closeAll               index.ios.bundle:7214
  ReactNativeReconcileTransaction.Mixin.perform                index.ios.bundle:7155
  batchedMountComponentIntoNode                                index.ios.bundle:7516
  Object.ReactDefaultBatchingStrategy.batchedUpdates           index.ios.bundle:16560
  Object.batchedUpdates                                        index.ios.bundle:6444
  Object.ReactNativeMount.renderComponent                      index.ios.bundle:7600
 URL: undefined
 line: undefined
 message: Buffer is not defined

Some relevant code:

var ReactRethinkdb = require('react-rethinkdb');
var r = ReactRethinkdb.r;

//...

ReactRethinkdb.DefaultSession.connect({
  host: 'localhost',
  port: 8015,
  path: '/db',
  secure: false,
  db: 'test',
});

//...

    console.log(r.table('turtles'));

[mikemintz]

I actually just tried to do this yesterday. I should have posted something about it. Try running this:

$ npm install buffer --save

And then add this to the top of the first javascript file you run (like index.ios.js):

global.Buffer = global.Buffer || require('buffer').Buffer;

Also, I think you'll need to require('react-rethinkdb/dist/node') instead of require('react-rethinkdb') since it's not running in a browser environment.

However, after I did all that, I ran into errors about some unknown http module, and didn't have enough time to resolve that yet. Let me know if you run into the same thing, or something else first, or find a way around it.

[ortutay]

That solves this issue, thanks.

I still wasn't able to get this to work in React Native though. It seems like rethinkdb requires a few node core modules ('net' and 'tls') which React Native doesn't provide. Haven't figured out how to get past that yet...

[mikemintz]

Oh I think I know how to deal with those. I can try making a react native
distribution that stubs net and tls modules, and http too if that helps.
I'll try to get that by tomorrow, thanks for helping to test this!
On Sep 11, 2015 6:06 PM, "ortutay" notifications@github.com wrote:

That solves this issue, thanks.

I still wasn't able to get this to work in React Native though. It seems
like rethinkdb requires a few node core modules ('net' and 'tls') which
React Native doesn't provide. Haven't figured out how to get past that
yet...

—
Reply to this email directly or view it on GitHub
#11 (comment)
.

[ortutay]

Great, thanks!

[mikemintz]

Actually I think it might be because the nodejs websocket library won't
work in react native. So I think it makes sense to use the original require
statement for the browser version of react-rethinkdb, and get
window,WebSocket defined using this polyfill:
facebook/react-native#890

I'll try it tomorrow but if you want to try sooner you can see if that
polyfill works for you.
On Sep 11, 2015 7:16 PM, "ortutay" notifications@github.com wrote:

Great, thanks!

—
Reply to this email directly or view it on GitHub
#11 (comment)
.

[mikemintz]

Unfortunately, I can't get the latest version of react-native to work easily, since it looks like it requires a newer xcode, which isn't available for os x 10.9.

Can you see if you can get the react-native websocket polyfill to work? You'll know it's working if you add console.log('ws', window.WebSocket) and it says something other than "ws undefined" in the xcode log.

And if that's working, then in theory the browser version require('react-rethinkdb') is the one that should work in react-native, since it doesn't depend on anything fancy other than websockets.

But I think the Buffer issue is actually telling, because browsers don't natively support Buffer either. Somehow the webpack build for rethinkdb-websocket-client is properly polyfilling Buffer for browsers, but it's not working for react-native. I'll try to look into that, but it'll be hard to debug until I get set up with a newer version of os x.

If you use require('react-rethinkdb') and the Buffer workaround above, what errors do you get?

[mikemintz]

Okay I think I understand the issue. In addition to having to polyfill window.WebSocket, which is apparently supported via facebook/react-native#890 , we have to replicate webpack's shims that it offers via https://github.com/webpack/node-libs-browser

I'm not sure what the best practice way of doing that is for react-native, and it looks like there's an open issue for it here facebook/react-native#1871

The Buffer workaround above is good, since it's a global. But the missing modules will mean we have to override what require does, and I'm unfamiliar with how that's set up in react-native. If you want to try https://github.com/mjohnston/react-native-webpack-server that might just work, but that might require completely changing your build process.

[ortutay]

Does react-rethinkdb depend on the rethinkdb package? rethinkdb uses net and tls modules, which I think are not available in React Native.

Logging out Buffer via the workaround you provided seems to work and show something that looks correct, but using the same approach for net and tls gives undefined in both cases. I'll take a look at the solutions you linked above to see if it solve the problem.

[mikemintz]

Yes, react-rethinkdb depends indirectly on rethinkdb. But if you use require('react-rethinkdb') instead of require('react-rethinkdb/dist/node') it will use a patched version that doesn't depend on net or tls. Which require are you using that gives you the net and tls errors?

The approach for Buffer works because you can override the Buffer global variable with plain javascript, but net and tls are modules that can only be overridden with the help of the build system.

I believe if you use require('react-rethinkdb'), you shouldn't get net or tls errors.

Also, if you want to simplify the problem, you can try using rethinkdb-websocket-client by itself, which is what react-rethinkdb depends on and is likely what's causing the issues. Just npm install rethinkdb-websocket-client --save and copy/paste the example in the README to the bottom of your index.ios.js file from https://github.com/mikemintz/rethinkdb-websocket-client#how-do-i-use-this

[mikemintz]

Currently on iOS, this is blocked on react-native ArrayBuffer support:

• [Bridge] Array Buffers / Typed Arrays for WebSockets, Ajax facebook/react-native#1424
• [WebSocket] binaryType='arraybuffer' support facebook/react-native#1829

On android, this is blocked on react-native WebSocket support:

• [Android] WebSocket support facebook/react-native#2837

When ArrayBuffers and WebSockets are working in react-native, react-rethinkdb should work with:

$ npm install events buffer --save

global.Buffer = global.Buffer || require('buffer').Buffer;
var ReactRethinkdb = require('react-rethinkdb');

[ide]

RN Android WebSockets are now in master. I don't think anyone has really stress-tested them if you want to give it a shot.

[fungilation]

Not much to add other than using ReactDB as backend for React Native is exactly what I'm looking for. Hopefully the blockers get resolved!

[fungilation]

On iOS ArrayBuffer support in RN. Looks like it's been resolved and merged? facebook/react-native#4483