react-native: "babelHelpers.asyncToGenerator is not a function" on React-Native 0.16.0 and 0.17.0

Hey ya’all…

Sorry for the lack of response on this issue. I want to explain a little bit about how the babel-preset works and why this error happens.

Babel is a complex beast. There are certain transforms that require “helpers” (contained in either babel-runtime, or included babelHelpers). React Native includes it’s own set of helpers, and it does this in order to improve startup performance (see the blog post that talks about it here: https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/ and the commit here: https://github.com/facebook/react-native/commit/b90fe8e2e8fd173498c268abf39a21b665e019ed). Important takeway – lacking certain babel helpers is not an issue, it’s a feature 😃

This is perf impact is super important…but unfortunately, it makes the Babel setup a bit more complex than what you’d read in the Babel documentation where you can just throw

{ presets: ["es2015", "stage-0"] }

into your .babelrc and get the latest and greatest JS features. That’s why we created the preset…it makes it easy for people to get started with a custom babelrc. Unfortunately, the stage-3 babel preset contains “async-to-generator”, which transforms async function blah() into function* blah(). This is not necessary for react-native (and as you all have discovered, actually breaks), as it already includes transform-regenerator, which allows for consistent use of generators and async functions on the versions of JSC that react-native uses. It is the inclusion of that transform by the stage-3 preset (which the stage-0 and stage-1 presets transitively include) that causes this error when using babel-preset-react-native with babel-preset-stage-0 (or stage-1, stage-2 or stage-3).

In addition, it’s important to note that babel-preset-react-native actually includes some stage-1 and stage-2 features. These are:

• transform-class-properties
• transform-object-rest-spread

However, being a group of developers who love to live on the cutting edge, we want to use all of the stage-0 features! A babelrc that would accomplish that goal would look like this:

{
  "presets": [ "react-native" ],
  "plugins": [ 
    "transform-do-expressions",
    "transform-function-bind",
    "transform-class-constructor-call",
    "transform-export-extensions",
    "syntax-trailing-function-commas",
    "transform-exponentiation-operator"
  ]
}

Note that it omits transform-async-to-generator as well as the two transforms from stage-1 and stage-2 that babel-preset-react-native already includes.

I’ve gone ahead and packaged this up into ANOTHER, unofficial babel-preset, called babel-preset-react-native-stage-0.

To use, simply npm install babel-preset-react-native-stage-0 --save and put

{ presets: ['react-native-stage-0'] }

in your .babelrc.

If you want experimental decorator support (provided by babel-plugin-transform-decorators-legacy), you can put:

{ presets: ['react-native-stage-0/decorator-support'] }

in your .babelrc instead.

Hope this helps everyone!

P.S.: Make sure when you change your babelrc, you clear watchman and packager caches for good measure:

watchman watch-del-all
[packager command] --reset-cache

I got the same issue 'undefined is not a function (evaluating ‘babelHelpers.asyncToGenerator’) something doessnt compile without ‘DEV’ mode. but with the developer mode it doess’nt seem to have any issues. (Which makes debugging rather hard.)

EDIT: Appearantly its not yet included in react-native v0.26 without some adaptations to the .babelrc file:

Example:

npm install babel-preset-react-native-stage-0 --save

.babelrc

{
  "presets": ["react-native-stage-0"]
}

or with decorator support (not yet needed myself)

{
  "presets": ["react-native-stage-0/decorator-support"]
}

Empty cache and Restart

watchman watch-del-all To ensure you have a new version of your application running on your phone: ./node_modules/react-native/packager/packager.sh start --reset-cache Found and Thanks to Kyle Finley for the answer: http://stackoverflow.com/questions/35563025/new-react-native-app-has-typeerror-babelhelpers-typeof-is-not-a-function-ios

I ran into this issue and the only way to solve it was to delete my .babelrc and run rm -rf $TMPDIR/react* && npm start --reset-cache.

RN 0.43.2

This happened to me in the released apk but not in the development environment. Any ideas?

None of the above worked for me, but it was an issue to do with something, somewhere in the cache. I resolved the issue by running

react-native start --reset-cache

“clean”: “rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean”

It worked for me, here is the link

I’ll leave the same comment here from: https://github.com/este/este/issues/662#issuecomment-189674310

It appears you can modify the react-native helpers file to (maybe?) fix this issue. Replace the helpers you find at /node_modules/react-native/packager/react-packager/src/Resolver/polyfills/babelHelpers.js (https://github.com/facebook/react-native/blob/master/packager/react-packager/src/Resolver/polyfills/babelHelpers.js) with the ones either generated yourself (how to: http://stackoverflow.com/questions/33703919/how-to-use-babel-6-external-helpers-in-the-browser) or from this code snippet:

  var babelHelpers = global.babelHelpers = {};
  babelHelpers.typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
    return typeof obj;
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
  };

  babelHelpers.jsx = function () {
    var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7;
    return function createRawReactElement(type, props, key, children) {
      var defaultProps = type && type.defaultProps;
      var childrenLength = arguments.length - 3;

      if (!props && childrenLength !== 0) {
        props = {};
      }

      if (props && defaultProps) {
        for (var propName in defaultProps) {
          if (props[propName] === void 0) {
            props[propName] = defaultProps[propName];
          }
        }
      } else if (!props) {
        props = defaultProps || {};
      }

      if (childrenLength === 1) {
        props.children = children;
      } else if (childrenLength > 1) {
        var childArray = Array(childrenLength);

        for (var i = 0; i < childrenLength; i++) {
          childArray[i] = arguments[i + 3];
        }

        props.children = childArray;
      }

      return {
        $$typeof: REACT_ELEMENT_TYPE,
        type: type,
        key: key === undefined ? null : '' + key,
        ref: null,
        props: props,
        _owner: null
      };
    };
  }();

  babelHelpers.asyncToGenerator = function (fn) {
    return function () {
      var gen = fn.apply(this, arguments);
      return new Promise(function (resolve, reject) {
        function step(key, arg) {
          try {
            var info = gen[key](arg);
            var value = info.value;
          } catch (error) {
            reject(error);
            return;
          }

          if (info.done) {
            resolve(value);
          } else {
            return Promise.resolve(value).then(function (value) {
              return step("next", value);
            }, function (err) {
              return step("throw", err);
            });
          }
        }

        return step("next");
      });
    };
  };

  babelHelpers.classCallCheck = function (instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  };

  babelHelpers.createClass = function () {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();

  babelHelpers.defineEnumerableProperties = function (obj, descs) {
    for (var key in descs) {
      var desc = descs[key];
      desc.configurable = desc.enumerable = true;
      if ("value" in desc) desc.writable = true;
      Object.defineProperty(obj, key, desc);
    }

    return obj;
  };

  babelHelpers.defaults = function (obj, defaults) {
    var keys = Object.getOwnPropertyNames(defaults);

    for (var i = 0; i < keys.length; i++) {
      var key = keys[i];
      var value = Object.getOwnPropertyDescriptor(defaults, key);

      if (value && value.configurable && obj[key] === undefined) {
        Object.defineProperty(obj, key, value);
      }
    }

    return obj;
  };

  babelHelpers.defineProperty = function (obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  };

  babelHelpers.extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  babelHelpers.get = function get(object, property, receiver) {
    if (object === null) object = Function.prototype;
    var desc = Object.getOwnPropertyDescriptor(object, property);

    if (desc === undefined) {
      var parent = Object.getPrototypeOf(object);

      if (parent === null) {
        return undefined;
      } else {
        return get(parent, property, receiver);
      }
    } else if ("value" in desc) {
      return desc.value;
    } else {
      var getter = desc.get;

      if (getter === undefined) {
        return undefined;
      }

      return getter.call(receiver);
    }
  };

  babelHelpers.inherits = function (subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  };

  babelHelpers.instanceof = function (left, right) {
    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
      return right[Symbol.hasInstance](left);
    } else {
      return left instanceof right;
    }
  };

  babelHelpers.interopRequireDefault = function (obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  };

  babelHelpers.interopRequireWildcard = function (obj) {
    if (obj && obj.__esModule) {
      return obj;
    } else {
      var newObj = {};

      if (obj != null) {
        for (var key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
        }
      }

      newObj.default = obj;
      return newObj;
    }
  };

  babelHelpers.newArrowCheck = function (innerThis, boundThis) {
    if (innerThis !== boundThis) {
      throw new TypeError("Cannot instantiate an arrow function");
    }
  };

  babelHelpers.objectDestructuringEmpty = function (obj) {
    if (obj == null) throw new TypeError("Cannot destructure undefined");
  };

  babelHelpers.objectWithoutProperties = function (obj, keys) {
    var target = {};

    for (var i in obj) {
      if (keys.indexOf(i) >= 0) continue;
      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
      target[i] = obj[i];
    }

    return target;
  };

  babelHelpers.possibleConstructorReturn = function (self, call) {
    if (!self) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return call && (typeof call === "object" || typeof call === "function") ? call : self;
  };

  babelHelpers.selfGlobal = typeof global === "undefined" ? self : global;

  babelHelpers.set = function set(object, property, value, receiver) {
    var desc = Object.getOwnPropertyDescriptor(object, property);

    if (desc === undefined) {
      var parent = Object.getPrototypeOf(object);

      if (parent !== null) {
        set(parent, property, value, receiver);
      }
    } else if ("value" in desc && desc.writable) {
      desc.value = value;
    } else {
      var setter = desc.set;

      if (setter !== undefined) {
        setter.call(receiver, value);
      }
    }

    return value;
  };

  babelHelpers.slicedToArray = function () {
    function sliceIterator(arr, i) {
      var _arr = [];
      var _n = true;
      var _d = false;
      var _e = undefined;

      try {
        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
          _arr.push(_s.value);

          if (i && _arr.length === i) break;
        }
      } catch (err) {
        _d = true;
        _e = err;
      } finally {
        try {
          if (!_n && _i["return"]) _i["return"]();
        } finally {
          if (_d) throw _e;
        }
      }

      return _arr;
    }

    return function (arr, i) {
      if (Array.isArray(arr)) {
        return arr;
      } else if (Symbol.iterator in Object(arr)) {
        return sliceIterator(arr, i);
      } else {
        throw new TypeError("Invalid attempt to destructure non-iterable instance");
      }
    };
  }();

  babelHelpers.slicedToArrayLoose = function (arr, i) {
    if (Array.isArray(arr)) {
      return arr;
    } else if (Symbol.iterator in Object(arr)) {
      var _arr = [];

      for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
        _arr.push(_step.value);

        if (i && _arr.length === i) break;
      }

      return _arr;
    } else {
      throw new TypeError("Invalid attempt to destructure non-iterable instance");
    }
  };

  babelHelpers.taggedTemplateLiteral = function (strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  };

  babelHelpers.taggedTemplateLiteralLoose = function (strings, raw) {
    strings.raw = raw;
    return strings;
  };

  babelHelpers.temporalRef = function (val, name, undef) {
    if (val === undef) {
      throw new ReferenceError(name + " is not defined - temporal dead zone");
    } else {
      return val;
    }
  };

  babelHelpers.temporalUndefined = {};

  babelHelpers.toArray = function (arr) {
    return Array.isArray(arr) ? arr : Array.from(arr);
  };

  babelHelpers.toConsumableArray = function (arr) {
    if (Array.isArray(arr)) {
      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

      return arr2;
    } else {
      return Array.from(arr);
    }
  };

Try clearing the package cache may be?

rm -rf $TMPDIR/react*

Nothing from here helped me so I made a workaround which seems to work with no problem: npm i async-to-generator

Then, somewhere in your app:

import asyncToGenerator from 'async-to-generator'

babelHelpers.asyncToGenerator = asyncToGenerator

P.S.: what caused the problem was some library which I had installed. Changing .babelrc in that lib as described above also solved the problem

rm -rf $TMPDIR/react* this worked for me.

@brentvatne can you investigate https://github.com/facebook/react-native/issues/4844#issuecomment-191282653 and https://github.com/facebook/react-native/issues/4844#issuecomment-190473078

Not sure if there is an issue or this belongs somewhere else, but it seems something is causing issues with the babel helpers.

@brentvatne answer is out of date for anyone stumbling here: https://github.com/facebook/react-native/blob/e6cb02d61af82832016bafb259a1b0d3039a357e/babel-preset/README.md

babel-preset-react-native is the preferred way to integrate your own babelrc

I can’t help but find the solutions posted here not really helpful I agree that the answer of @skevy does a great deal of explanation and gives a great workaround for the stage-0-folks

If babel’s mechanisms are broken on purpose to achieve better performance, fine - but I’d expect an alternative “react-native way of adding my own presets or plugins”

Right now, we are failing to get rid of the error described in #4831