Can't find variable: Buffer

Question

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 i

Answer 1

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.

Answer 2

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.

Answer 3

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!

Answer 4

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:'
};

Answer 5

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

global.Buffer = global.Buffer || require('buffer').Buffer