26

I'm trying to use node modules in my react-native app, and I'm taking the ReactNativify approach here.

I'm all set up now, and I got the crypto package to load in fine. However when I added in eth-lightwallet things have been getting weird.

Every since I added that package in, npm hasn't been installing dependancies of anything. Meaning I've had to add them in manually. And everytime I install a dependency somehow related to eth-lightwallet, that module is uninstalled. Although tedious and annoying, I'm hoping it can shed light onto my current problem.

Right now I'm running into a Can't find variable: Buffer which is being thrown in a util folder in the standard library. I've taken a look at the code and it's accessing Buffer from a global namespace. Thing is, I'm importing Buffer into the global namespace. Here's a look at my global.js

// Inject node globals into React Native global scope.
global.Buffer = require('buffer').Buffer;
global.process = require('process');
global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';

// Needed so that 'stream-http' chooses the right default protocol.
global.location = {
    protocol: 'file:',
};

// Don't do this in production. You're going to want to patch in
// https://github.com/mvayngrib/react-native-randombytes or similar.
global.crypto = {
    getRandomValues(byteArray) {
        for (let i = 0; i < byteArray.length; i++) {
            byteArray[i] = Math.floor(256 * Math.random());
        }
    },
};

My guess is the standard library is being evaluated before this global is being loaded in, and thus the error is thrown.

1
  • I am having the same issue, have you tried using rn-nodeify package instead of react nativify?
    – Fatah
    Mar 14, 2018 at 8:03

5 Answers 5

33

In TypeScript I had to import Buffer explicitly.

import { Buffer } from "buffer";

I would have expected that the compiler would complain about Buffer being missing before the import and/or that "source.organizeImports": true would have removed the line when saving the file, but neither were true.

@ehacinom's solution also worked.

3
  • What would be the reason of that unexpected behavior? Aug 19, 2022 at 17:40
  • it actually worked after alot search Thank you. Nov 9, 2022 at 12:15
  • This did not work for me. Another post also mentioned to place global.Buffer = Buffer; at the top of app.js, but didn't work. Any other suggestions?
    – Soubriquet
    Jan 9 at 21:52
19

I ran npm install buffer and put this at the top of files that needed Buffer:

global.Buffer = global.Buffer || require('buffer').Buffer
2
  • 2
    I am getting the same error, can you please explain which files will buffer. There are App.js, index.js and the other files Dec 1, 2019 at 10:44
  • Thank you, this solved the issue for me. But isn't importing buffer enough?
    – Ray
    Sep 26, 2021 at 1:08
4

I was using rn-nodeify to use node packages into my react-native project. After adding the postinstall script

    "postinstall": "./node_modules/.bin/rn-nodeify --install buffer,events,process,stream,util,inherits,fs,path,assert --hack;"

I was still running into Can't find variable: Buffer . which I solved finally by importing the shim.js file into my App.js :

import './shim';

Hope it Helps ! Happy hacking.

3
  • 2
    import './shim' solved it for me as well. I imported it into my index.js and at first it wasn't doing anything, then I moved the import statement above the line 'import App from ./App' and it worked.
    – faraza
    May 25, 2021 at 0:38
  • I already has the "postinstall" bit added to package.json, but after adding import './shim'; it fixed it.
    – MikeyE
    Apr 10, 2022 at 3:23
  • 1
    @faraza thank you! Been on this for hours and now finally working after adding to top of index js Aug 6, 2022 at 13:59
2

Coming back to this to leave a solution in case anyone is stuck on this. The solution was to essentially try to shim in different packages in different times to change the load order.

We tried going back to a different version when TYPED_ARRAY_SUPPORT was being treated differently and Buffer was more dependent on it. While on the older version we tried a lot of different things and eventually gave up and backtracked by updating buffer to the most recent version and finally everything worked.

What I mean to say is we're not sure how we fixed it, but it was by randomly changing the load order until we got lucky. Not a good answer, I'm aware, but the best I can provide for this issue.

Here's what our global.js looked like at the end

// Inject node globals into React Native global scope.
// Required for crypto functionality for bitcoinjs-lib, web3, etc.

global.Buffer = require('buffer').Buffer;
//global.Buffer.TYPED_ARRAY_SUPPORT = false;

global.process = require('process');
global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';

var getRandomValues = function(byteArray) {
  var bytes = crypto.rng.randomBytes(byteArray.length);
  for (let i = 0; i < byteArray.length; i++) {
    byteArray[i] = bytes[i];
  }
};
// "But Zach, aren't you just doing the same thing twice?"
// Yes. Initializing the crypto-browserify module eventually requires
// crypto.getRandomValues to exist, so we must add it here once.
// However, crypto-browserify does not support getRandomValues, so we
// must re-add it after loading the module.
global.crypto = { getRandomValues };
global.crypto.rng = require('react-native-randombytes');
global.crypto = require('crypto');
global.crypto.getRandomValues = getRandomValues;
global.crypto.rng = require('react-native-randombytes');
crypto.rng.seedSJCL();

// Needed so that 'stream-http' chooses the right default protocol.
global.location = {
  protocol: 'file:'
};
2
  • i cant find global.js file Dec 1, 2019 at 10:53
  • global.js is something you'd create and put at the root level. I ended up sun setting this project so if you'd like to take a look at how I did it - github.com/arshbot/hail
    – arshbot
    Dec 2, 2019 at 18:56
1

first install the following

yarn add buffer process babel-plugin-react-native-nodeify-hack

Then add to your babel settings .babelrc

{
  "presets": ["react-native"],
  "plugins": ["babel-plugin-react-native-nodeify-hack"]
}

Import the buffer and process modules manually. In your index.ios.js and index.android.js, add this to the first line:

import process from 'process';
import buffer from 'buffer';
global.Buffer = buffer.Buffer

try to stop the running React Native Packager, and run:

rm -rf $TMPDIR/react-*

and start it again

You are good to go!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.