js-waku
js-waku copied to clipboard
React Native Guide/Example
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.
+1 this would be awesome
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.
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?
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
...
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.
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.
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.
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.
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 🙏
@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! 🤝
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:
- Waku code would be run natively, so there is no messing around the JavaScript Core Engine and its limitations
- Again, native so better performance
- Should not make much difference for developers as a JS package would be published and can be imported in react-native.
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
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.
I am currently changing to rollup that supports the
browser
field inpackage.json
. Will need to look up if it also support thereact-native
field.
Incredible work, friends. 💪 react-native field is supported in package.json.
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.
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?
#802 should hopefully help with that.
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**
withBigInt
and.pow
Can be reviewed if a platform wants to use the same SDK for Browser and React Native.
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
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.
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
cc @b4s36t4
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
Some progress on react-native compatibility for js-libp2p - https://github.com/libp2p/js-libp2p/issues/2136#issuecomment-1849999462
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
Adding a reference to @maschad example https://github.com/ipfs-shipyard/js-libp2p-react-native
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.
Work in this should be paused for now.
Work in this should be paused for now.
I moved it into TODO because of that. Do you think we move to Icebox?
I'd say icebox as it's not in the roadmap :)