Here’s a problem you might run into while using React Native: Let’s say you want to use the module to create some hashes. It might seem natural to do something like this: crypto crypto = ( ); secret = ; hash = crypto.createHmac( , secret) .update( ) .digest( ); .log(hash); // Other imports.. const require 'crypto' const 'open-sesame' const 'sha256' 'abcdefg' 'hex' console // Other UI code (components, rendering etc..) Just import a module and create a hash, right? Right? Nope! But because is a core Node JS module, which means it’s probably C++ code bundled with the Node JS binary, not Javascript. The React Native packager can’t package it[1] along with your app’s Javascript bundle, so you get a runtime error: . this doesn’t work, crypto Unable to resolve module 'crypto' This makes core modules like , etc. and the thousands of npm modules that depend on them unusable from React Native. Fortunately, there’s a solution to this problem, but it takes some work. crypto stream Solution If you’re familiar the module bundler , you might know that it allows you to use core Node JS modules like in the browser using polyfills[2]. So let’s try to create a standalone Javascript file that contains a polyfill for the module, and use it within our app: Browserify crypto crypto 1. First, install : browserify npm -g browserify install 2. Create a file that imports the module and simply exports it: crypto-in.js crypto crypto = ( ); .exports = crypto; var require "crypto" module 3. Create a standalone Javascript bundle using : crypto.js browserify browserify crypto- -o crypto.js in .js This creates a file , which contains some 21,500 lines of code (containing the polyfills). The last few lines contain our code from : crypto.js crypto-in.js },{ : }], :[ { crypto = ( ); .exports = crypto; },{ : }]},{},[ ]); // Some 21,500 lines of polyfills.. "indexof" 100 153 ( ) function require,module,exports // Our code from crypto-in.js var require "crypto" module "crypto" 56 153 At this point, it might seem like we’re done, but we’re not! If you replace the line in the app code with and try to run the app, you get the following error: const crypto = require('crypto'); const crypto = require('./crypto'); Turns out the word is given special treatment by the React Native packager, and you can’t redefine it to mean something else, which is what Browserify tries to do within the bundle. If you look carefully inside , you will notice that it always passes in a custom function as a parameter and never actually uses the global . There is a hacky but simple way to fix this problem, explained below. require crypto.js require require 4. Open the file in a text editor, and replace all instances of the word with something else e.g. . Make sure it’s unique, so it doesn’t conflict with any existing code and mess things up. crypto.js require reqqq If you save and reload the app now, the previous error will go away, but a new error will appear: crypto.js The packager isn’t able to find the method , because isn’t exported properly from . If you look at the last few lines of the bundle, you’ll find that this is because we’re setting not on the global object, but on something else that’s passed in as a function argument: createHmac crypto crypto.js module.exports modules },{ : }], :[ { crypto = ( ); .exports = crypto; },{ : }]},{},[ ]); // Some 21,500 lines of polyfills.. "indexof" 100 153 ( ) function require,module,exports // Our code from crypto-in.js var require "crypto" module "crypto" 56 153 5. To export properly from , we need to make a few more changes to the file: crypto crypto.js Add the statement var crypto; at the top of the file to declare a new variable. Replace the statement with to set the outer variable, instead of creating a local variable inside the function body. var crypto = require('crypto'); crypto = require('crypto'); Move the line outside the function body to the bottom of the file, so that it references the global object. module.exports = crypto; module After the changes, should look something like this: crypto.js crypto; },{ : }], :[ { crypto = reqq( ); },{ : }]},{},[ ]); .exports = crypto; var // Some 21,500 lines of polyfills.. "indexof" 100 153 ( ) function reqq,module,exports "crypto" "crypto" 56 153 module If you run the app now, it should all work perfectly: And that’s it! Summary Here’s a short summary of the steps it takes to use a core Node JS module like (or something that depends on it) in a React Native app: crypto Create a standalone Javascript bundle containing polyfills for the core modules using (see and ). browserify crypto-in.js crypto.js Replace all instances of the keyword inside the bundle with something unique e.g. , so that the React Native package manager leaves it alone. require reqqq Export the module correctly from the bundle, by importing it into a global variable, and setting the global to that variable (see the modified ). crypto module.exports crypto.js The bundle generated by can be rather large in size. For instance, the file generated above is over 500kb in size. So keep an eye out for large bundles. Consider using a tool like to minify the bundle and reduce its size. Warning: browserify crypto.js Uglify References [1] — https://github.com/facebook/react-native/issues/1871 [2] — https://github.com/substack/browserify-handbook#builtins [3] — https://github.com/facebook/react-native/issues/6253 Thanks for reading! I hope you’ve found this article helpful. Feel free to leave comments or suggestions. I would love to know if there is a better way to do this.
