entropy-js does not support react native

[benschac]

iOS Bundling failed 9071ms
The package at "node_modules/@entropyxyz/entropy-js/dist/index.js" attempted to import the Node standard library module "crypto".
It failed because the native React runtime does not include the Node standard library.

entropy-js is shipping with deps that expect crypto from nodejs standard lib, crashing the application

[benschac]

link to PR for reference: https://github.com/entropyxyz/entropy-client/pull/129

[benschac]

Going to use this a research / context note for internal teammates / outside contributors / users of entropy.js / brain dump

Problem

entropy-js has a requirement on @polkadot/wasm-crypo-wasm which has a requirement on a builtin node package crypto which isn't supported in react-native / web runtimes.

<img width="200" alt="Screenshot 2023-11-16 at 1 57 35 PM" src="https://github.com/entropyxyz/entropy-js/assets/2502947/4bd2ce83-ab8a-46ee-a0fc-a9cd83b177c7">

It's particularly tricky / hacky to get crypto nodejs package to work.

Possible solutions

• https://github.com/tradle/react-native-crypto, is pretty hacky
• https://github.com/tradle/rn-nodeify, is pretty scary

rn-nodeify --install installs shims for core node modules, see './shims.js' (https://github.com/tradle/rn-nodeify/blob/master/shims.js) for the current mappings. It recurses down node_modules and modifies all the package.json's in there to add/update the browser and react-native fields. It sounds scary because it is. However, it does work.

rn-nodeify --hack Now that you're scared, I should also mention that there are some package-specific hacks (see './pkg-hacks.js' (https://github.com/tradle/rn-nodeify/blob/master/pkg-hacks.js)), for when the React Native packager choked on something that Webpack and Browserify swallowed.

If you're looking for a saner approach, check out ReactNativify (https://github.com/[philikon](https://github.com/philikon)/ReactNativify). I haven't tested it myself, but I think philikon (https://github.com/philikon) will be happy to help.

• https://github.com/philikon/ReactNativify - a lot of setup, I don't think folks will have the patience for this kind of thing.
• Create a web / react-native build of the sdk with built in shims/polyfills so the developer using the sdk and just plug-and-play, and not have to do any crazy setup. We already need to do it for web since node:fs isn't a thing.

Tried solutions

• https://github.com/parshap/node-libs-react-native gave this an initial try and it wasn't working, should probably give it a little more time, and triple check it's not possible. I was having an issue with hermes which react native uses under the hood as a runtime https://stackoverflow.com/questions/70440505/ts1343-the-import-meta-meta-property-is-only-allowed-when-the-module-opti
• https://hackernoon.com/using-core-node-js-modules-in-react-native-apps-64acd4d07140 pretty old article, didn't work for me
• https://github.com/browserify/crypto-browserify - using this, but doesn't really solve the problem, we need the node_modules of the app to use a polyfill, rather than crypto from nodejs.

Other research

• looked at how uniswap https://github.com/Uniswap/wallet does it in their app. It looks like they don't have this problem, since they're using crypto directly, rather than like how we do it with @polkadot/wasm-crypto-wasm and use the browserify-crypto plugin via their web app which looks like it's shared with their native app.
• looked at how rainbow does it https://github.com/rainbow-me/rainbow/blob/eb838bad5e4f97c062a984b5094aa79b96d3e039/scripts/postinstall.sh#L109 they're using nodify, which makes sense. I don't think this is really a solution for entropyjs I don't think devs would want to jump through all of these hoops to get sdk working on react-native.

[benschac]

I posted this above a couple of weeks ago:

https://hackernoon.com/using-core-node-js-modules-in-react-native-apps-64acd4d07140

I'm suggesting something similar for entropy js client.

I assuming entropy-js is working on web because: https://www.npmjs.com/package/crypto-js

Active development of CryptoJS has been discontinued. This library is no longer maintained.

Nowadays, NodeJS and modern browsers have a native Crypto module. The latest version of CryptoJS already uses the native Crypto module for random number generation, since Math.random() is not crypto-safe. Further development of CryptoJS would result in it only being a wrapper of native Crypto. Therefore, development and maintenance has been discontinued, it is time to go for the native crypto module.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API

[mixmix]

I have some experience in this neighborhood. You're right it can get ugly.

Leads for later:

• nodejs-mobile-react-native
• patch-package - depending on the crypto functions called, you can monkey patch (in a stable way!) the method calls.