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 followin

Answer 1

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) :

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

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

Answer 2

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.

Answer 3

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

Answer 4

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.