@walletconnect/client throw Error: While trying to resolve module crypto

Question

I am using https://reactnative.dev/docs/environment-setup 0.64 I npm install @walletconnect/client

put below import in App.js import WalletConnect from "@walletconnect/client";

after npx react-native run-ios and got below error:

error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/@pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:

I tried to remove node_modules folder and npm install again but still get the same error. I am sure that it is thrown by @walletconnect/client because when I removed import WalletConnect from "@walletconnect/client"; then the error gone

Answer 1

crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.

There are a few ways to solve this problem, all of them fairly hacky.

One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto

To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:

npm i --save react-native-crypto
# install peer deps 
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify 
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files 
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings 
./node_modules/.bin/rn-nodeify --hack --install

If you're using Expo, note that you'll need to eject Expo before this can work.

Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect

Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.

As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd