15

I have posted this here have created react-native app using

react-native init myapp
added web3 in package.json
npm install
react-native run-ios

but i am getting the error unable to resolve module crypto from web3-eth-accounts. Is there any way to fix this

unable to resolve cryptoenter image description here

Trinu
  • 1,721
  • 3
  • 21
  • 41

4 Answers4

11

Crypto is a node js module, when React Native is run - it uses Javascript Core. Crypto isn't include within this. When I installed crypto I used the following package:

https://www.npmjs.com/package/react-native-crypto

Instructions: 

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
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!  
import './shim.js'
// ...the rest of your code

Import shim.js in your index.js file.

When you have done that crypto should be made available, if it still doesn't work I had to create a const in my App.js file like so:

export const cryp = require('crypto');

And import it into the components you need.

UPDATE

I've done a fresh build for this, I followed the below:

react-native init TestApp

Follow the instructions above for Crypto.

Linked:

react-native link

react-native run-ios

JRK
  • 3,686
  • 1
  • 13
  • 19
  • after executing the above steps and after running react-native run-ios i am getting CFBundleIdentifier", Does Not Exist – Trinu Oct 08 '18 at 09:38
  • What version of RN are you using, have you opened the project in XCode? – JRK Oct 08 '18 at 09:42
  • 0.57 and when i try to buid in xcode build is failing – Trinu Oct 08 '18 at 11:36
  • I'll do a fresh build and check for you. – JRK Oct 08 '18 at 11:37
  • where to import this file import './shim.js' in app.js? Also can you tell me where to add this line export const cryp = require('crypto'); in app.js ?. I don't have tsx file. – Trinu Oct 08 '18 at 20:41
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181531/discussion-between-jrk-and-trinu). – JRK Oct 09 '18 at 07:59
4

react-native-crypto don't work on recent react-native version 0.63.3 and react version 16.13.1, any more.

I used crypto-js package. The version is 3.1.9-1 in my react-native app. It's working well. You can add below line in package.json file.

"crypto-js": "3.1.9-1",
NinjaDev
  • 1,228
  • 11
  • 21
  • Did you have to alias `crypto-js` to `crypto` somehow? I have `crypto-js` installed but metro still tells me it's unable to resolve crypto. – Claudio Brasser Apr 19 '21 at 07:44
  • @ClaudioBrasser, I didn't renamed it. I used `crypto-js`. – NinjaDev Apr 19 '21 at 08:10
  • 1
    are you importing `crypto` yourself or is it used by a library? In my case `crypto` is required by a library and I want to replace it by `crypto-js` since `crypto` is not available for rn. – Claudio Brasser Apr 19 '21 at 10:27
  • hmm... I used the `crypto-js` to encrypt / decrypt a text. If the `crypto` package is required by other library, I think you maybe change another library, or should customize the library so that it import `crypto-js`. – NinjaDev Apr 19 '21 at 14:38
  • I shared the example code on https://github.com/dev0088/Whitings-RN – NinjaDev Apr 19 '21 at 14:42
  • I met require cycle warn when using crypto-js 4.1.1: WARN Require cycle: node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js -> src/pages/index/index.tsx -> src/utils/hzxw-api-client.ts -> node_modules/crypto-js/index.js -> node_modules/crypto-js/core.js -> node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js – smoothdvd Nov 18 '21 at 05:56
1

crypto is a node's library that works with the browser however we can use it with react native with some hacks mentioned below follow these steps and boom! you are ready to rock.

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" fieldwith relevant mappings 
./node_modules/.bin/rn-nodeify --hack --install
Uzef Shaikh
  • 636
  • 6
  • 11
  • Hi, can you explain how to do the last line in your answer? How to add the shim? I have this in my bin/rn-nodify: if (toShim.indexOf('crypto') !== -1) { toShim.push('react-native-randombytes') } – Bomber Sep 28 '21 at 08:36
  • 1
    Hello, @Bomber You don't have to add any files manually shim file will be automatically added in the root folder of your project by the last command `./node_modules/.bin/rn-nodeify --hack --install` – Uzef Shaikh Sep 29 '21 at 05:48
0

i had the same problem, it seems the crypto module is not supported by react native because when i install crytpo , it does not have an index.js file in the node_modules. so my problem came about when i was trying to use jsonwebtoken which uses crypto to encrypt data. so i uninstalled jsonwebtoken and switched to react-native-pure-jwt

Mitch.json
  • 21
  • 2