react-native: "babelHelpers.asyncToGenerator is not a function" on React-Native 0.16.0 and 0.17.0
Hello,
I updated React-Native from 0.14.0 to 0.16.0 and from now, I have errors at runtime:


Here are the npm dependencies
:
"dependencies": {
"async": "^1.5.0",
"immutable": "^3.7.6",
"react-native": "^0.16.0",
"react-native-contacts": "../../react-native-contacts",
"react-native-contacts-rx": "^1.0.1",
"react-native-gifted-messenger": "0.0.7",
"react-native-i18n": "0.0.6",
"react-redux": "^4.0.1",
"redux": "^3.0.5",
"rx": "^4.0.7"
},
"devDependencies": {
"babel-eslint": "^5.0.0-beta6",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^2.1.1",
"eslint-plugin-react": "^3.11.3",
"events": "^1.1.0",
"flux": "^2.1.1",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"redux-devtools": "^3.0.0"
}
And my .babelrc
file:
{
"retainLines": true,
"compact": true,
"comments": false,
}
Any suggestions?
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 5
- Comments: 33 (10 by maintainers)
Links to this issue
Commits related to this issue
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to facebook/react-native by cmcewen 8 years ago
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to mikelambert/react-native by cmcewen 8 years ago
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to nicktate/react-native by cmcewen 8 years ago
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to mikelambert/react-native by cmcewen 8 years ago
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to DanielMSchmidt/react-native by cmcewen 8 years ago
- Fix babelHelpers.typeof is not a function Summary: We started encountering the error described in #5747 (`babelHelpers.typeof is not a function) after switching from npm to yarn. [This comment](https... — committed to facebook/metro by cmcewen 8 years ago
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
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()
intofunction* blah()
. This is not necessary for react-native (and as you all have discovered, actually breaks), as it already includestransform-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: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:
Note that it omits
transform-async-to-generator
as well as the two transforms from stage-1 and stage-2 thatbabel-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 putin your .babelrc.
If you want experimental decorator support (provided by
babel-plugin-transform-decorators-legacy
), you can put: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:
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
or with decorator support (not yet needed myself)
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-iosI ran into this issue and the only way to solve it was to delete my
.babelrc
and runrm -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
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:
Try clearing the package cache may be?
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:
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
-folksIf 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