React Native: crypto module problem

[tuomohopia]

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

[cawfree]

Hello!

Am I right in thinking you haven't yet manually enabled support for crypto in your React Native project? (RN has been missing out-of-the-box support of this core node library for some time). It is however possible to enable support manually.

Please check out the configuration in create-react-native-dapp for details on how this is achieved. 🙏

[EndLess728]

I am facing the same issue

[JunichiSugiura]

We've experienced this issue on CI while upgrading to RN 0.65.1. Somehow rn-nodeify --hack doesn't seem to work with this module so I end up manually patched it in post install script.

sed -i -- 's/require("crypto")/require("react-native-crypto")/g' node_modules/@walletconnect/randombytes/dist/cjs/node/index.js

https://github.com/LedgerHQ/ledger-live-mobile/pull/1947/files#diff-c7a2bbcab4d0757f7a7ba519bf73e7af3dbdb641ff4fdee2b70b684586f49cbdR20

[TimDaub]

We've experienced this issue on CI while upgrading to RN 0.65.1. Somehow rn-nodeify --hack doesn't seem to work with this module so I end up manually patched it in post install script.

sed -i -- 's/require("crypto")/require("react-native-crypto")/g' node_modules/@walletconnect/randombytes/dist/cjs/node/index.js

https://github.com/LedgerHQ/ledger-live-mobile/pull/1947/files#diff-c7a2bbcab4d0757f7a7ba519bf73e7af3dbdb641ff4fdee2b70b684586f49cbdR20

This assumes that you installed react-native-crypto before. I also had to do:

sed -i -- 's/require("crypto")/require("react-native-crypto")/g' node_modules/@walletconnect/crypto/dist/cjs/lib/node.js

[Victorvikson1996]

Did any of the solutions work

[ziadTaha]

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

[cdiddy77]

Hello!

Am I right in thinking you haven't yet manually enabled support for crypto in your React Native project? (RN has been missing out-of-the-box support of this core node library for some time). It is however possible to enable support manually.

Please check out the configuration in create-react-native-dapp for details on how this is achieved. 🙏

I have scanned the source code in the above mentioned repo, and not found what it is that you are doing. I will credit you with having come up with a solution, because I have run create-react-native-dapp, and built and run the resulting app, which works. It gives me hope, but I could use a little more detail on where to look for the necessary configuration.

[cdiddy77]

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

[heymage]

I got to the same issue as @cdiddy77. I created my own sed patches and got stream package issues.

[benorgera]

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"

[Abubakar672]

Hey everyone i am facing this error can some one help me out in this. I have tired alot of methods but none of them work, Do anyone of you know the solution to this

[Victorvikson1996]

I have a solution to this problem

[Victorvikson1996]

https://stackoverflow.com/questions/29836434/requiring-unknown-module-crypto-in-react-native-environment

[Abubakar672]

Hey @Victorvikson1996 thank you for the response i tried this but it didn't work

[tomonari-t]

this repo has solved this problem

[LauColombini]

@tomonari-t can you fix the issue?

[LauColombini]

@Abubakar672 could you solve the issue?

[LauColombini]

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" },

[ch3njust1n]

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.

[jaxkashif34]

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"

First I run the npm i --save-dev rn-nodeify then npm install and got this error

[email protected] postinstall node_modules/.bin/rn-nodeify --install crypto --hack

'node_modules' is not recognized as an internal or external command, operable program or batch file.