web3 React native expo

[JacopoNeroni]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

With React Native Expo V4.13.0, importing the web3 V1.6.1 module, I get the following error:

`Unable to resolve module crypto from /Users/black/Desktop/test/node_modules/web3-eth-accounts/lib/index.js: crypto could not be found within the project or in these directories: node_modules/web3-eth-accounts/node_modules 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-* 24 | var Method = require('web3-core-method'); 25 | var Account = require('eth-lib/lib/account');

26 | var cryp = (typeof global === 'undefined') ? require('crypto-browserify') : require('crypto'); | ^ 27 | var scrypt = require('scrypt-js'); 28 | var uuid = require('uuid'); 29 | var utils = require('web3-utils');`

Does anyone have the same problem?

Expected Behavior

Yesterday I updated the version of expo and it no longer worked, before it worked fine.

Steps to Reproduce

import Web3 from "web3";

Web3.js Version

1.6.1

Environment

React Native Expo V4.13.0

Anything Else?

No response

[luu-alex]

Hello, after some searching I saw some people have a similar problem. Please let me know if this fixes the issue. Did this problem occur with a new project that you just created or an existing project?

[JacopoNeroni]

It occurred on a new project, before the expo update it worked fine.

[JacopoNeroni]

Hello, after some searching I saw some people have a similar problem. Please let me know if this fixes the issue. Did this problem occur with a new project that you just created or an existing project?

I have tried to follow the instructions in that post but I always get the same error: var cryp = (typeof global === 'undefined') ? require('crypto-browserify') : require('crypto');

[koust]

I have same issue. did u fix it?

[JacopoNeroni]

I have same issue. did u fix it?

nope

[JacopoNeroni]

Hello, after some searching I saw some people have a similar problem. Please let me know if this fixes the issue. Did this problem occur with a new project that you just created or an existing project?

I have tried to follow the instructions in that post but I always get the same error: var cryp = (typeof global === 'undefined') ? require('crypto-browserify') : require('crypto');

[WangQingye]

I have this question too. i am using vue3 and vite. the web3 version is 1.6.1

[koust]

@BlackBlock88 can you install https://www.npmjs.com/package/react-native-crypto ? I guess, it'll fix it.

[JacopoNeroni]

@BlackBlock88 can you install https://www.npmjs.com/package/react-native-crypto ? I guess, it'll fix it.

no, I get the same error

[koust]

Did u do all stage on the description? @BlackBlock88

[JacopoNeroni]

Did u do all stage on the description? @BlackBlock88

Yes, I always get the error looking for the crypto library. Did you solve it that way?

[koust]

Yeap, I fixed. it's working now.

[JacopoNeroni]

Yeap, I fixed. it's working now.

I have tried on both ios and android and I always get the same error on this line: var cryp = (typeof global === 'undefined') ? require('crypto-browserify') : require('crypto');

How did you solve the problem? but do you use expo?

[nazarhussain]

@koust Please share some insights how did you resolved it on your end. That will help @BlackBlock88.

@BlackBlock88 Theoretically it should not be a problem if you are having node-libs-browser or react-native-crypto under dependencies of your package.json.

Can you share a sample code repo to reproduce this issue? It will help to debug it quickly.

[JacopoNeroni]

@koust Please share some insights how did you resolved it on your end. That will help @BlackBlock88.

@BlackBlock88 Theoretically it should not be a problem if you are having node-libs-browser or react-native-crypto under dependencies of your package.json.

Can you share a sample code repo to reproduce this issue? It will help to debug it quickly.

This is my package.json file: { "name": "test", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "expo": "~43.0.2", "expo-status-bar": "~1.1.0", "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.3", "react-native-crypto": "^2.2.0", "react-native-web": "0.17.1", "web3": "^1.6.1" }, "devDependencies": { "@babel/core": "^7.12.9" }, "private": true }

This is my App.js: `import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native';

const Web3 = require('web3');

export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); `

This is the error: `iOS Bundling failed 3809ms Unable to resolve module crypto from /Users/black/Desktop/test/node_modules/eth-lib/lib/bytes.js: crypto could not be found within the project or in these directories: node_modules/eth-lib/node_modules 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-* 7 | var random = function random(bytes) { 8 | var rnd = void 0;

9 | if (typeof window !== "undefined" && window.crypto && window.crypto.getRandomValues) rnd = window.crypto.getRandomValues(new Uint8Array(bytes));else if (typeof require !== "undefined") rnd = require("c" + "rypto").randomBytes(bytes);else throw "Safe random numbers not available."; | ^ 10 | var hex = "0x"; 11 | for (var i = 0; i < bytes; ++i) { 12 | hex += ("00" + rnd[i].toString(16)).slice(-2); `

[koust]

I just followed this steps. (https://www.npmjs.com/package/react-native-crypto). I don't use expo. but I don't think so, this issue not about expo.

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

[stemerlini]

I have solved the issue by installing crypto-js (npm install crypto-js@latest) and adding the following code to the metro.config.js:

resolver: { extraNodeModules: { crypto: './node_modules/crypto-js', }, }

Unfortunately, I have got an another error while trying to use web3.js with expo and react native. Not sure how to fix this at the moment.

[mohit-techdoodles]

@stemerlini @koust @BlackBlock88 i m having same issue in react-native. it works in android build but ios build not working Did you solve it ?

Unable to resolve module crypto from /hydro_app_b/node_modules/eth-lib/lib/bytes.js: crypto could not be found within the project or in these directories: node_modules/eth-lib/node_modules node_modules ../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-* 7 | var random = function random(bytes) { 8 | var rnd = void 0;

9 | if (typeof window !== "undefined" && window.crypto && window.crypto.getRandomValues) rnd = window.crypto.getRandomValues(new Uint8Array(bytes));else if (typeof require !== "undefined") rnd = require("c" + "rypto").randomBytes(bytes);else throw "Safe random numbers not available."; | ^ 10 | var hex = "0x"; 11 | for (var i = 0; i < bytes; ++i) { 12 | hex += ("00" + rnd[i].toString(16)).slice(-2);

[iboxgithub]

Same here, the import simply does not work. If it is supposed to, could we have an example repo or Snack to check?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[SamanthaSHan]

I am also running into the same issue. Any way to get around this?

[mellertson]

I just followed this steps. (https://www.npmjs.com/package/react-native-crypto). I don't use expo. but I don't think so, this issue not about expo.

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

Actually, react-native-crypto is incompatible with expo. I spent hours the other night figuring that one out.

[mellertson]

I have solved the issue by installing crypto-js (npm install crypto-js@latest) and adding the following code to the metro.config.js:

resolver: { extraNodeModules: { crypto: './node_modules/crypto-js', }, }

Unfortunately, I have got an another error while trying to use web3.js with expo and react native. Not sure how to fix this at the moment.

What is the other error you got? I ask because I too implemented a solution like the one you described, but then got a 2nd error. If memory serves me correctly, I believe the 2nd error has something to do with randomBytes or something like that. Just curious if you ran into the same issue?

[SamanthaSHan]

hm, I've had a different error that is kind of related to your solution, but was able to solve it: https://stackoverflow.com/a/71865318/7871458

Though I ran into react native trying to call http issue. Seems like the dependency is using http-providers library for web3. Obviously this module is meant for web applications. Didn't want to go into the rabbit hole of trying to swap that dependency. The 1.0.0-beta.51 doesn't use this http dependency.

[thinhcnb297]

Same problem!! Any body can resovle this. Thaks

[dpachecorod]

Any updates on this? I have the same problem.

[mellertson]

hm, I've had a different error that is kind of related to your solution, but was able to solve it: https://stackoverflow.com/a/71865318/7871458

Though I ran into react native trying to call http issue. Seems like the dependency is using http-providers library for web3. Obviously this module is meant for web applications. Didn't want to go into the rabbit hole of trying to swap that dependency. The 1.0.0-beta.51 doesn't use this http dependency.

I hadn't heard of expo-crypto, but I will check it out. Seems like the solution I used might be similar to yours. After I made my previous post I ran into additional issues. Long story short after installing expo-random I added the following line to the top of the module where I execute crypto functions, like generating private keys.

import * as Random from "expo-random";

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[iboxgithub]

will try this soon: https://twitter.com/margelo_io/status/1551898742286155777

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.