React-native: babelHelpers.objectDestructuringEmpty is not a function

[cancan101]

I upgraded from RN 15 to RN 16 and now I get:
babelHelpers.objectDestructuringEmpty is not a function:

Currently my .babelrc files looks like:

{
  "presets": ["react"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-es2015-classes",
    "transform-export-extensions"
  ]
}

I previously also had es2015 in the presets list but then I got: http://stackoverflow.com/questions/34112110/upgrade-to-react-native-0-16-error.

[facebook-github-bot]

Hey cancan101, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[udfalkso]

Hi @cancan101 I'm also hitting this issue. Did you manage to solve it? Thanks

[cancan101]

Try adding "transform-runtime" to the plugins.

[udfalkso]

Thanks. Did you have to add [email protected] to your package file to get this to work? (See: https://phabricator.babeljs.io/T2759)

I've tried that and now I get this problem:

Error: 
 stack: Error: Requiring unknown module "babel-runtime/core-js/number/min-safe-integer". If you are sure the module is there, try restarting the packager.
    at requireImpl (http://192.168.20.127:8081/index.ios.bundle?platform=ios&dev=true:48:7)

But this file is there.

(develop)[udi@udis-mac:node_modules/babel-runtime]$ find . -name "*min-safe-integer*" -print
./core-js/number/min-safe-integer.js
./node_modules/core-js/fn/number/min-safe-integer.js
./node_modules/core-js/library/fn/number/min-safe-integer.js
./node_modules/core-js/library/modules/es6.number.min-safe-integer.js
./node_modules/core-js/modules/es6.number.min-safe-integer.js

[udfalkso]

@cancan101 Any chance you could share what's in your package.json and .babelrc files? Would be very helpful, thanks!

[udfalkso]

Finally managed to get past this error. It turns out that I had code like this that needed to be removed:

var {
} = React;

[cancan101]

That worked for me as well.

[cancan101]

Is this some sort of know issue ? How did you figure it out.

[udfalkso]

Just a lot of digging around and trial and error.

[satya164]

You seem to be using very few transforms, and missing lots of transforms like destructuring, which might be causing the issue. It'll be better to copy/extend React Native's .babelrc and add what you need.

[udfalkso]

Aren't those transforms automatically being run by the RN packager @satya164 ? This was a special case of destructuring an empty object which I think caused the problem here.

[satya164]

@udfalkso Yeah, in your case yes. But the packager uses your .babelrc instead if you have one, or at least that's how it used to be. I haven't tried with a custom .babelrc in the latest version though.

[cancan101]

Right now I am using a .babelrc of:

{
  "presets": [],
  "plugins": [
    "transform-decorators-legacy",
    "transform-export-extensions"
  ]
}

and it works as long as I remove all instances of:

const {
} = React;

[udfalkso]

I'm using an empty .babelrc file, but using es6 modules and other things. So I assume RN packager is picking up the rest of the slack. Finally all working now.

[cancan101]

Is this an issue with Babel 6? A feature?

[marco-amoroso]

2 days ago we decided to upgrade RN from 0.14 to 0.19, after trial and errors we reached the babelHelpers.objectDestructuringEmpty is not a function error and found this thread. Thanks indeed. We had some function(state, {}) ... in our codebase.

Not sure if it's a feature but it was working fine in Babel 5. Most likely Babel 6 is stricter.

[gelobelo02]

can someone further explain the solution to this error?

[philolo1]

I had a similar issue because I used {} at some point, is this an issue with babel, and if so which repo should we report it.

[MutableLoss]

I found this issue when having braces in place for destructuring, but without any values between the braces.

e.g. const value = ({}) => { ... }

I believe Babel is simply complaining that the object is in fact empty, and does not have any values to destructure.

[sujitpk-perennial]

For me adding extra curly bracket causing this issue. so I have changed
from renderTextInput= {({}) => ()}
to renderTextInput= {() => (})

[alexthegoodman]

I too fell down this trap! Yes, you may use an empty object {}, but are you sure you aren't having a syntax error like:

let { } = this.props;

That's what got me!

[patrickleemsantos]

Hi Guys,

I am also experiencing this error when I Run and Build my react native app on XCode.

[error][tid:com.facebook.react.JavaScript] babelHelpers.objectDestructuringEmpty is not a function. (In 'babelHelpers.objectDestructuringEmpty(o.default)', 'babelHelpers.objectDestructuringEmpty' is undefined)

I already tried all the solutions here but still facing the problem.

[HananeAlSamrout]

i had this issue also, the reason was
let {}=this.state

[mckrava]

let { } = some_object;
This "empty definition" in any place of code is a reason of babel error.

[dgreensp]

It's a shame that the only fix here is "don't do that." Empty destructuring is perfectly valid, and it could be a nice idiom for ignoring an argument, as in ({}, foo) => .... In fact, the Babel helper in question exists specifically to allow destructuring an empty object in a spec-compliant way: https://github.com/babel/babel/issues/681

[punksta]

I had similar problem:

const removeKey = (key: string, {[key]: {}, ...rest}) => rest;

it works good in debug, but release build chased.

fixed by changing {} to _.

const removeKey = (key, {[key]: _, ...rest}) => rest;

[vigneshprabhu20]

I got this fix upon installing babel helper plugin.

Package.json:
"devDependencies": {
"babel-cli": "6.26.0",
"babel-plugin-external-helpers": "^6.22.0",
....
}

babelrc:
{
"presets": ["react-native", "flow"],
"plugins": [
"external-helpers",
...
]
}

Reference to install this plugin:
https://www.npmjs.com/package/babel-plugin-external-helpers

[RossKinsella]

My issue was an empty destructuring for the arguments of a function. What's interesting is this was only an issue when I did a production build. In my iOS emulator I didn't get an exception.

[ishigamii]

@vigneshprabhu20 I just tried your solution and sadly I still have the same problem.

I fixed my problem thanks to your comments.
My problem was that one of my render was like this :

_renderHeader = ({}) => {...}

and it should be like this :

_renderHeader = () => {...}

A fix is really needed for this 👍

[ramonprata]

tks @vigneshprabhu20 you solution worked for me