connect: react-native support for 0x connect

[generalpiston]

It seems 0x connect is using the isomorphic-fetch library which has no support for react-native. More specifically, I'm getting the following error:

Can't find variable: self

<unknown>
    fetch-npm-browserify.js:6:22
loadModuleImplementation
    require.js:213:12
<unknown>
    http_client.js:40
loadModuleImplementation
    require.js:213:12
<unknown>
    index.js:3:20
loadModuleImplementation
    require.js:213:12
<unknown>
    ....js:8
loadModuleImplementation
    require.js:213:12
<unknown>
    index.js:1
loadModuleImplementation
    require.js:213:12
<unknown>
    <unknown file>:0
loadModuleImplementation
    require.js:213:12
<unknown>
    index.js:8
loadModuleImplementation
    require.js:213:12
<unknown>
    index.js:4
loadModuleImplementation
    require.js:213:12
guardedLoadModule
    require.js:140:45
global code
    <unknown file>:0

This is coming from here: https://github.com/matthew-andrews/isomorphic-fetch/blob/master/fetch-npm-browserify.js#L6.

Work Around (Hack)

For now, I've been changing instances of self to global.

[kylanhurt]

This is also causing an issue for me!

[fabioberger]

Hm, what replacement library would you recommend we use such that it works in browsers, node and react-native contexts?

[kylanhurt]

@fabioberger Actually it turns out that it may have been related to my simulator not being in debug mode. If the issue pops up again I'll do some more diligence. Really is one of the strangest bugs I've ever encountered in React Native.

Thank you for the quick response, though!

[BMillman19]

@kylanhurt is connect working for you in react native?

[kylanhurt]

@BMillman19 It's working. The isometric fetch issue is a nagging issue for many React Native projects (including outside of 0x-related stuff).

I hope people find this issue so that they can see if my solution fixes it for them.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[KevinHu2014]

@kylanhurt

Actually it turns out that it may have been related to my simulator not being in debug mode.

This is due to the different run time that React Native is using.
In debug mode, React Native is running on Chrome which uses V8.
While running on physical device , React Native uses JSC(JavaScriptCore).

[KevinHu2014]

@BMillman19
While using version 2.0.8 on React Native project, we encounter similar issues.
Besides the same issue of isomorphic-fetch.

1. undefined is not a function
   

In ./utils/lib/src/abi_encoder/emv_data_type_factory.js

'use strict'
var __extends =
  (this && this.__extends) ||
  (function () {
    var extendStatics = function (d, b) {
      extendStatics =
        Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array &&    //  <-  this line will throw error
          function (d, b) {
            d.__proto__ = b
          }) ||
        function (d, b) {
          for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]
        }
      return extendStatics(d, b)
    }
    return function (d, b) {
      extendStatics(d, b)
      function __ () {
        this.constructor = d
      }
      d.prototype =
        b === null ? Object.create(b) : ((__.prototype = b.prototype), new __())
    }
  })()
...

2. undefined is not a valid argument for ...
   

In ./node_modules/chalk/index.js (this seems to be a dependency module)

'use strict';
const escapeStringRegexp = require('escape-string-regexp');
const ansiStyles = require('ansi-styles');
const stdoutColor = require('supports-color').stdout;

const template = require('./templates.js');

const isSimpleWindowsTerm = process.platform === 'win32' && !(process.env.TERM || '').toLowerCase().startsWith('xterm');

// `supportsColor.level` → `ansiStyles.color[name]` mapping
const levelMapping = ['ansi', 'ansi', 'ansi256', 'ansi16m'];

// `color-convert` models to exclude from the Chalk API due to conflicts and such
const skipModels = new Set(['gray']);
// Object = global;
const styles = Object.create(null);

function applyOptions(obj, options) {
	options = options || {};

	// Detect level if not set manually
	const scLevel = stdoutColor ? stdoutColor.level : 0;
	obj.level = options.level === undefined ? scLevel : options.level;
	obj.enabled = 'enabled' in options ? options.enabled : obj.level > 0;
}

function Chalk(options) {
	// We check for this.template here since calling `chalk.constructor()`
	// by itself will have a `this` of a previously constructed chalk object
	if (!this || !(this instanceof Chalk) || this.template) {
		const chalk = {};
		applyOptions(chalk, options);

		chalk.template = function () {
			const args = [].slice.call(arguments);
			return chalkTag.apply(null, [chalk.template].concat(args));
		};
		Object.setPrototypeOf(chalk, Chalk.prototype); // this line throws error
		Object.setPrototypeOf(chalk.template, chalk);

		chalk.template.constructor = Chalk;

		return chalk.template;
	}

	applyOptions(this, options);
}
 ...

Work Around (Hack)

The two error cases above seems to be the same problem.
Caused by Object.setPrototypeOf doesn’t work on JSC on Android.
For now we add polyfill to these places.

Here's the polyfill we use

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
        obj.__proto__ = proto
        return obj
       }

'use strict'
var __extends =
  (this && this.__extends) ||
  (function () {
    var extendStatics = function (d, b) {
     //  Apply polyfill here
      Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
        obj.__proto__ = proto
        return obj
       }

      extendStatics =
        Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array &&
          function (d, b) {
            d.__proto__ = b
          }) ||
        function (d, b) {
          for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]
        }
      return extendStatics(d, b)
    }
    return function (d, b) {
      extendStatics(d, b)
      function __ () {
        this.constructor = d
      }
      d.prototype =
        b === null ? Object.create(b) : ((__.prototype = b.prototype), new __())
    }
  })()
...

'use strict';
const escapeStringRegexp = require('escape-string-regexp');
const ansiStyles = require('ansi-styles');
const stdoutColor = require('supports-color').stdout;

const template = require('./templates.js');

const isSimpleWindowsTerm = process.platform === 'win32' && !(process.env.TERM || '').toLowerCase().startsWith('xterm');

// `supportsColor.level` → `ansiStyles.color[name]` mapping
const levelMapping = ['ansi', 'ansi', 'ansi256', 'ansi16m'];

// `color-convert` models to exclude from the Chalk API due to conflicts and such
const skipModels = new Set(['gray']);
// Object = global;
const styles = Object.create(null);

function applyOptions(obj, options) {
	options = options || {};

	// Detect level if not set manually
	const scLevel = stdoutColor ? stdoutColor.level : 0;
	obj.level = options.level === undefined ? scLevel : options.level;
	obj.enabled = 'enabled' in options ? options.enabled : obj.level > 0;
}

function Chalk(options) {
	// We check for this.template here since calling `chalk.constructor()`
	// by itself will have a `this` of a previously constructed chalk object
	if (!this || !(this instanceof Chalk) || this.template) {
		const chalk = {};
		applyOptions(chalk, options);

		chalk.template = function () {
			const args = [].slice.call(arguments);
			return chalkTag.apply(null, [chalk.template].concat(args));
		};
                //  Apply polyfill here
		Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) { error
			obj.__proto__ = proto
			return obj
		}
		Object.setPrototypeOf(chalk, Chalk.prototype);
		Object.setPrototypeOf(chalk.template, chalk);

		chalk.template.constructor = Chalk;

		return chalk.template;
	}

	applyOptions(this, options);
}
 ...

Discussion

The hacking work around doesn't seems to be a good solution.
@BMillman19 Is there any suggestions ?
I'm willing to help, contribute the react-native support.