Requiring unknown module "crypto" in react-native environment

Question

I'm writing a simple Twitter app using react-native. Using twit module to get twitter feeds and stream. Below is the code, it works fine node. However, when included into my react-native app, seeing error "Requiring unknown module "crypto"". Dependency seems to be myapp->twit->oauth->crypto (thats part of node v0.12.2). Any suggestions to get this working inside react-native environment?

var Twit = require('twit')
var T = new Twit({
    consumer_key:''
  , consumer_secret:''
  , access_token:''
  , access_token_secret:''
})
var filtered_tweets=[];
var error;
var isSuccess=false;

function getTweets(searchString){
    T.get('search/tweets',{q:searchString, count:100}, getResponse);
    }

function getResponse(err,data,response){
        if(err) { 
            handleGetErr(err); 
        }
        handleGetData(data.statuses);
    }

function handleGetErr(err){

    enter code here

    error = err;
    }

function handleGetData(data){
    data.map(function(tweet){
      var twit={
        twit:tweet.id,
        created_at:tweet.created_at,
        text:tweet.text,
        retweet_count:tweet.retweet_count,
        favorite_count:tweet.favorite_count
      };
      filtered_tweets.push(twit);
    });
    console.log(filtered_tweets);
    isSuccess=true;
}
getTweets("@sahaswaranamam");
module.exports = getTweets;

![attached][2]

Answer 1

The crypto module is a built-in Node module; React Native runs JS on JavaScriptCore (when on the device or simulator) and on Chrome itself (when using Chrome debugging), so modules that depend on built-in Node.js modules won't work. See the JavaScript Runtime section of the React Native docs for more info.

I'm not sure how hard it would be to integrate into a React Native app, but browser module bundlers like Browserify often have browser versions of core Node.js modules, like this one for crypto.

Answer 2

If you are using rn-nodeify as @emmby suggests, then you can use react-native-crypto. Instructions from the README:

1. Install

   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 mvayngrib/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
   

2. 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
   

But rn-nodeify also states:

If you're looking for a saner approach, check out ReactNativify. I haven't tested it myself, but I think philikon will be happy to help

---

With ReactNativify you create a rn-cli.config.js and then in a transformer.js you let Babel transform bundle dependencies using babel-plugin-rewrite-require:

// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager.  All other built-in node
// libraries get rewritten to their browserify counterpart.

[require('babel-plugin-rewrite-require'), {
  aliases: {
    crypto: 'crypto-browserify',
    // ...
  },
  throwForNonStringLiteral: true,
}]

(Note: You can also do this in without these 2 js files directly in .babelrc)

(Note2: Though ReactNativify is the cleaner way, it is still giving me issues wiring up crypto.getRandomValues for production-use in RN. See this question)

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

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 5

I was having the same issue when implementing the Twilio package in my React Native app, and having React Native break over the crypto dependency.

As a work around I ended up creating a separate, stand alone Node/Express app to act as my server and take care of the Twilio logic I had. That way I removed all Twilio logic from my React Native app and moved it to Node. I then just called my Express route in React Native using fetch, which triggered the functionality I wanted to happen with Twilio. If you're unfamiliar with fetch here's a good starting point - Making AJAX calls with Fetch in React Native

In addition, here's my question on the crypto dependency breaking my app:

twilio-react-native-unable-to-resolve-module-crypto

Answer 6

As far I can see amazon-cognito-identity-js uses crypto-js 3.3.0 without any additional magic... If that version of the package works then perhaps try that.

Answer 7

After having tried a bunch of these solutions and never really having been satisfied with any of them (some didn't even work), I managed to stumble upon react-native-quick-crypto, which honestly worked much more effortlessly than trying to lift the existing crypto library to the front-end