js-waku icon indicating copy to clipboard operation
js-waku copied to clipboard

React Native Guide/Example

Open D4nte opened this issue 2 years ago • 30 comments

This is a feature or change request

Problem

~It is currently not possible to use js-waku in react-native. Probably because of the polyfills.~ Should probably work now.

Definition of Done

Provide guide and example of using js-waku in React native. Update readme to clarify which implementations support react-native.

D4nte avatar Mar 22 '22 11:03 D4nte

+1 this would be awesome

therealjmj avatar Mar 23 '22 01:03 therealjmj

also +1 - we would really like to be able to use js-waku in our mobile app and just realized there are incompatibilities with libp2p dependencies. @jrmeurer can help test any potential solutions.

dao avatar Mar 23 '22 13:03 dao

I believe that #337 needs to be done first, especially removal of polyfills. I want to check that next week. What kind of incompatibilities are you encountering?

D4nte avatar Mar 24 '22 04:03 D4nte

Unable to resolve module libp2p-gossipsub/src/heartbeat from /Users/.../node_modules/js-waku/build/main/lib/waku_relay/relay_heartbeat.js: libp2p-gossipsub/src/heartbeat could not be found within the project or in these directories:
  node_modules/js-waku/node_modules
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  25 | Object.defineProperty(exports, "__esModule", { value: true });
  26 | exports.RelayHeartbeat = void 0;
> 27 | const heartbeat_1 = require("libp2p-gossipsub/src/heartbeat");
     |                              ^
  28 | const utils_1 = require("libp2p-gossipsub/src/utils");
  29 | const constants = __importStar(require("./constants"));
  30 | const get_relay_peers_1 = require("./get_relay_peers");

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
...

therealjmj avatar Mar 28 '22 16:03 therealjmj

React Native typically does not allow node modules. I'm not sure what would be needed to enable libp2p or other deps within React Native.

therealjmj avatar Mar 28 '22 16:03 therealjmj

Unable to resolve module libp2p-gossipsub/src/heartbeat from /Users/.../node_modules/js-waku/build/main/lib/waku_relay/relay_heartbeat.js: libp2p-gossipsub/src/heartbeat could not be found within the project or in these directories:

Yes, a dependency broke their API on patch version. Should be fixed with [email protected]. Let me know if not.

D4nte avatar Mar 31 '22 03:03 D4nte

Now:
ERROR Error: Requiring module "node_modules/js-waku/build/main/index.js", which threw an exception: TypeError: Conversion from 'BigInt' to 'number' is not allowed.

Same error we had with @noble/ed25519 library. We were not able to resolve this with either polyfills or babel configs.

therealjmj avatar Apr 04 '22 15:04 therealjmj

Now: ERROR Error: Requiring module "node_modules/js-waku/build/main/index.js", which threw an exception: TypeError: Conversion from 'BigInt' to 'number' is not allowed.

Same error we had with @noble/ed25519 library. We were not able to resolve this with either polyfills or babel configs.

Thanks @jrmeurer. I believe @jemboh has reached the same error. He is off this week (back Thursday).

I wonder if adding a shim.js to js-waku could be a solution, as described here: https://github.com/facebook/react-native/issues/28492#issuecomment-824698934

It means changing js-waku of course. Is that something you already tried? FYI @jemboh, I think we should try this next, WDYT?

ps: Such a shim could also help with https://github.com/status-im/js-waku/issues/358 without needing lib consumer to update their browserlist so it could be a 1 stone 2 birds outcome.

D4nte avatar Apr 05 '22 02:04 D4nte

Shim in js-waku could be a good idea. I haven't tried this yet - we have a massive deadline in 1 month, so a bit distracted. Would love to launch with js-waku, I imagine it will be a group effort 🙏

therealjmj avatar Apr 05 '22 03:04 therealjmj

@jrmeurer I've been working on this and have come across the same issue with the BigInt error. I've written a rough guide in the readme. https://github.com/status-im/rn-waku-relay-poc

I'm going to look in to a shim in js-waku itself as well.

Any extra things you might have seen along the way, please feel free to raise a PR or an issue in that repo so we can keep each other updated on our progress.

Thanks for all your help and work so far! 🤝

jemboh avatar Apr 08 '22 13:04 jemboh

It may make more sense to use a native module based on go-waku. See https://discord.com/channels/864066763682218004/865466694554484738/971941000333393960:

Publish a native module would mean:

  1. Waku code would be run natively, so there is no messing around the JavaScript Core Engine and its limitations
  2. Again, native so better performance
  3. Should not make much difference for developers as a JS package would be published and can be imported in react-native.

D4nte avatar May 06 '22 01:05 D4nte

For now we are focusing effort on publishing a native module using go-waku.

We are still open to making js-waku work in react-native but not clear how this can be achieved:

https://discord.com/channels/864066763682218004/865466694554484738/977027312782573578

D4nte avatar May 20 '22 02:05 D4nte

Waku is now available for react-native platforms via a go-waku native module: https://discord.com/channels/864066763682218004/957040003593154571/981324886679113808

yarn add @waku/react-native

Join Discord and give us some feedback.

Here are my latest thoughts on js-waku in react native: https://discord.com/channels/864066763682218004/865466694554484738/977027312782573578

wonder if we could have a way to make @noble/secp256k1 and its react native for optional dependencies and simply switch the library used depending on availability. js-waku is currently using webpack but I am open to change it.

I am currently changing to rollup that supports the browser field in package.json. Will need to look up if it also support the react-native field.

D4nte avatar Jun 01 '22 00:06 D4nte

I am currently changing to rollup that supports the browser field in package.json. Will need to look up if it also support the react-native field.

Incredible work, friends. 💪 react-native field is supported in package.json.

therealjmj avatar Jun 01 '22 00:06 therealjmj

Incredible work, friends. muscle react-native field is supported in package.json.

Supported by whom? Webpack support does not seem to be out of the box.

D4nte avatar Jun 01 '22 01:06 D4nte

Incredible work, friends. muscle react-native field is supported in package.json.

Supported by whom? Webpack support does not seem to be out of the box.

It wouldn't be Webpack... I'm not entirely sure. The react-native field was present in a fresh app created with the react-native CLI, ex npx react-native init NewApp. Perhaps used by metro or babel?

therealjmj avatar Jun 01 '22 01:06 therealjmj

#802 should hopefully help with that.

D4nte avatar Jun 22 '22 03:06 D4nte

Let's park it as https://github.com/waku-org/waku-react-native is available.

Should now work as the issues are fixed:

  • no more polyfills
  • Latest React Native supports BigInt AFAIK
  • nobles library have replaced BigInt's n and ** with BigInt and .pow

Can be reviewed if a platform wants to use the same SDK for Browser and React Native.

fryorcraken avatar Mar 23 '23 09:03 fryorcraken

Bringing it back to discuss potential work on the topic as it is asked by people who want to use js-waku.

cc @waku-org/js-waku-developers @fryorcraken

If we don't plan to enable it and repo https://github.com/waku-org/waku-react-native is not working then we need to deprecate it and update README + docs to prevent people from spending time on unnecessary things

weboko avatar Nov 20 '23 15:11 weboko

Not sure if this is the best place to comment but I am currently leading an effort to do this for js-libp2p which would be required at a minimum to utilize it in js-waku, I can't speak to what further lift would be required after that as I am not so familiar with js-waku's codebase.

maschad avatar Nov 20 '23 17:11 maschad

Not sure if this is the best place to comment but I am currently leading an effort to do this for js-libp2p which would be required at a minimum to utilize it in js-waku, I can't speak to what further lift would be required after that as I am not so familiar with js-waku's codebase.

Cool! For now this particular issue is too unclear an may or may not be connected to your efforts. @maschad, to alight further DM'ed you on Discord

weboko avatar Nov 20 '23 18:11 weboko

cc @b4s36t4

fryorcraken avatar Nov 29 '23 01:11 fryorcraken

Bringing it back to discuss potential work on the topic as it is asked by people who want to use js-waku.

cc @waku-org/js-waku-developers @fryorcraken

If we don't plan to enable it and repo https://github.com/waku-org/waku-react-native is not working then we need to deprecate it and update README + docs to prevent people from spending time on unnecessary things

Decoupling important part of this task into https://github.com/waku-org/js-waku/issues/1743

The example part is probably better to shape into template and to do in scope of https://github.com/waku-org/js-waku-examples/issues/271

weboko avatar Nov 29 '23 12:11 weboko

Some progress on react-native compatibility for js-libp2p - https://github.com/libp2p/js-libp2p/issues/2136#issuecomment-1849999462

achingbrain avatar Dec 11 '23 12:12 achingbrain

Some progress on react-native compatibility for js-libp2p - libp2p/js-libp2p#2136 (comment)

super cool!


imo we should prioritize the react-native SDK effort with js-waku cc @waku-org/js-waku-developers @hackyguru @chair28980

danisharora099 avatar Dec 14 '23 07:12 danisharora099

Adding a reference to @maschad example https://github.com/ipfs-shipyard/js-libp2p-react-native

weboko avatar Jan 10 '24 21:01 weboko

What is done - pollyfills are provided - https://github.com/waku-org/js-waku/pull/1915 Leftover at this stage is to provide an example https://github.com/waku-org/lab.waku.org/pull/36

Moving to TODO for now.

weboko avatar Apr 24 '24 14:04 weboko

Work in this should be paused for now.

fryorcraken avatar May 21 '24 01:05 fryorcraken

Work in this should be paused for now.

I moved it into TODO because of that. Do you think we move to Icebox?

weboko avatar May 21 '24 09:05 weboko

I'd say icebox as it's not in the roadmap :)

fryorcraken avatar May 22 '24 03:05 fryorcraken