找不到变量：缓冲区

Question

我正在尝试在我的react-native应用程序中使用节点模块，并且在这里采用ReactNativify方法。

我现在已经全部设置好了，我可以很好地加载加密软件包了。但是，当我添加eth-lightwallet时，事情变得很奇怪。

自从我添加了该软件包以来，npm一直没有安装任何依赖项。这意味着我必须手动添加它们。每次我安装某种与eth-lightwallet相关的依赖项时，都会卸载该模块。尽管很乏味和烦人，但我希望它能为我当前的问题提供启示。

现在，我遇到的是Can't find variable: Buffer，它正在标准库的util文件夹中引发。我看过代码，它是从全局名称空间访问Buffer的。问题是，我正在将Buffer导入到全局名称空间中。看看我的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());
        }
    },
};

我的猜测是，在加载此全局变量之前，正在评估标准库，因此会引发错误。

Answer 1

我运行了npm install buffer，并将其放在需要Buffer的文件的顶部：

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

Answer 2

回到此问题以解决问题，以防有人被卡住。解决方案是从根本上尝试在不同的时间填充不同的包装以更改加载顺序。

当我们以不同的方式对待TYPED_ARRAY_SUPPORT并且Buffer更依赖于它时，我们尝试返回到另一个版本。在旧版本上，我们尝试了许多不同的操作，最终放弃了，并通过将缓冲区更新到最新版本来回溯，最终一切正常。

我的意思是，我们不确定如何解决它，但这是通过随机更改装载顺序直到幸运为止。我知道这不是一个很好的答案，但是我可以为这个问题提供最好的答案。

这是我们的global.js最后的样子

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

首先安装以下内容

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

然后将其添加到Babel设置.babelrc

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

手动导入缓冲区和处理模块。在您的index.ios.js和index.android.js中，将其添加到第一行：

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

尝试停止正在运行的React Native Packager，然后运行：

rm -rf $TMPDIR/react-*

然后重新开始

你很高兴去！

Answer 4

我使用rn-nodeify将节点程序包用于我的react-native项目。添加后安装脚本后

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

我仍在遇到找不到变量：缓冲区。我最终通过将shim.js文件导入我的App.js解决了这一问题：

import './shim';

希望有帮助！祝您黑客愉快。