walletconnect-monorepo: React Native: crypto module problem

Crypto dependency problem

on React Native

Having upgraded to React Native 0.65.1, I now get the following error when building the app:

error: Error: Unable to resolve module crypto from /path/project/node_modules/@walletconnect/randombytes/dist/cjs/node/index.js: crypto could not be found within the project or in these directories:
  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-*
   5 | Object.defineProperty(exports, "__esModule", { value: true });
   6 | exports.randomBytes = void 0;
>  7 | const crypto_1 = __importDefault(require("crypto"));
     |                                           ^
   8 | const encoding_1 = require("@walletconnect/encoding");
   9 | function randomBytes(length) {
  10 |     const buf = crypto_1.default.randomBytes(length);

Some discussion about this on stackoverflow: https://stackoverflow.com/a/64363788

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 7
Comments: 20

Links to this issue

React Native: crypto could not to be found within the project or in these directories

Most upvoted comments

following the workflow from react-native-crypto https://github.com/tradle/react-native-crypto

npm i --save react-native-crypto

install peer deps

npm i --save react-native-randombytes react-native link react-native-randombytes

on RN >= 0.60, instead do: cd iOS && pod install

install latest rn-nodeify

npm i --save-dev 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

it should work fine

+10

ziadTaha on Jan 13, 2022

This is the issue of react native running in browser environment, not having the Node.js builtin deps. See here or here. To fix:

npm i --save-dev rn-nodeify

Add postinstall script to nodemodules:

"scripts": {
  …
  "postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}

Then npm install.

Note if you have this issue with multiple Node.js builtin packages (ie. streams) you can hack them inline as

"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack && node_modules/.bin/rn-nodeify --install stream --hack"

benorgera on May 16, 2022

This is the issue of react native running in browser environment, not having the Node.js builtin deps. See here or here. To fix:

npm i --save-dev rn-nodeify

Add postinstall script to nodemodules:
"scripts": {
  …
  "postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Then npm install.

Note if you have this issue with multiple Node.js builtin packages (ie. streams) you can hack them inline as

"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack && node_modules/.bin/rn-nodeify --install stream --hack"

This help me, but then i have this issue “Invariant Violation: Tried to register two views with the same name RNSVGRect” and i solve with putting this on the package.json: "overrides": { "react-native-svg": "^13.4.0" }, "resolutions": { "react-native-svg": "^13.4.0" },

LauColombini on Dec 21, 2022

this repo has solved this problem

tomonari-t on Jul 3, 2022

I was able to get past this by employing the sed hacks from https://github.com/WalletConnect/walletconnect-monorepo/issues/595#issuecomment-992510359 . But that just leads to:

 error Unable to resolve module stream from /path/to/app/node_modules/cipher-base/index.js: stream could not be found within the project or in these directories:
  node_modules/cipher-base/node_modules
  node_modules
  ../../node_modules

cdiddy77 on Feb 4, 2022

following the workflow from react-native-crypto https://github.com/tradle/react-native-crypto

npm i --save react-native-crypto

install peer deps

npm i --save react-native-randombytes react-native link react-native-randombytes

on RN >= 0.60, instead do: cd iOS && pod install

install latest rn-nodeify

npm i --save-dev 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

it should work fine

But now I’m getting the following errors:

ERROR  TypeError: null is not an object (evaluating 'RNRandomBytes.seed')
ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
       A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
       A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

ch3njust1n on Feb 1, 2023