Twilio React Native - Unable to resolve module crypto

Question

I'm working on implementing the twilio package into my react-native project and when I require it in my file the project wont load and I'm seeing the following error:

Unable to resolve module crypto from /Users/[myname]/Documents/Projects/React-Native/[app-name]/node_modules/twilio/lib/webhooks.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/crypto and its parent directories

I've tried installing the crypto package directly and that doesn't seem to work either.

Has anyone experienced this issue, and has a way to resolve it?

score 19 · Answer 1 · answered May 27 '16 at 23:18

19

You can use the rn-nodeify module to get crypto on react-native.

Add rn-nodeify to your devDependencies in package.json:

"devDependencies": {
  "rn-nodeify": "^6.0.1"
}

Add the following to the scripts section of the same file:

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

Be aware that rn-nodeify will modify your package.json.

More information available here: https://www.npmjs.com/package/rn-nodeify

answered May 27 '16 at 23:18

emmby

99,783
65
191
249

Make sure you read the source of this hack too -> Iirc it makes the rng fairly insecure, so you have to be ok with that. – aegbert Jun 03 '16 at 21:42
For a cleaner alternative to rn-nodeify, namely ReactNativify, see this answer: [Requiring unknown module “crypto” in react-native environment](https://stackoverflow.com/a/45304528/8295283) – Arnold Schrijver Jul 25 '17 at 13:22

score 4 · Answer 2 · answered Apr 05 '16 at 17:14

I suggest you have a look there, plenty of solutions are given because none seem to fix for everyone.

I suggest you try the following (taken from the issue from the link) :

rm -rf node_modules
rm -fr $TMPDIR/react-*
watchman watch-del-all
npm cache clean && npm install
npm start from ./node_modules/react-native

But check out the issue in its integrality, many found other fixes that worked for them.

score 4 · Accepted Answer · answered Apr 20 '16 at 20:58

It seems that React Native doesn't accept certain packages based on their dependencies, Twilio being one of these.

While not a direct solution, I created a work around to this issue by creating a separate Express server to make the Twilio call, and calling that route from within my React Native app.

skozin · Answer 4 · 2017-10-06T12:37:00.360

React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.

As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:

npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require

Then add plugins config to your .babelrc file:

{
  "presets": ["react-native"],
  "plugins": [
    ["babel-plugin-rewrite-require", {
      aliases: {
        crypto: 'crypto-browserify'
      }
    }]
  ]
}

Restart the packager and that should be it.

This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.

Twilio React Native - Unable to resolve module crypto

4 Answers4

Linked