React-native: A trailing comma is not permitted after the rest element - ListView.js 457:14

[colinlmcdonald]

Issue Description

I wanted to start my first react-native application. I followed the steps in the tutorial to get it installed and running. Without any modifications, after running react-native run-ios and going to Xcode I got the following error:

Steps to Reproduce / Code Snippets

Follow the react-native tutorial https://facebook.github.io/react-native/docs/getting-started.html. After deleting the trailing commas in;

ListView.js - line 457,
NavigationCard.js - line 85,
MessageQueue.js - line 390

it worked. Interestingly, these trailing commas were all after using the spread operator (...).

Expected Results

Trailing commas in deconstructed objects should work.

Additional Information

• React Native version: 0.34.1
• Platform(s) (iOS, Android, or both?): iOS
• Operating System (macOS, Linux, or Windows?): macOS

[bijeebuss]

just hit the same issue

[mlazowik]

Just run into the same thing. Worked with

• babel-polyfill 6.13.0
• babel-preset-es2016 6.14.0

Broken with

• babel-polyfill 6.16.0
• babel-preset-es2016 6.16.0

Investigating further.

[CarringtonCreative]

Same here

[joncursi]

Yep. Lots of stuff different packages under node_modules just broke for me with the same error message, not just react-native.

[mlazowik]

https://github.com/babel/babylon/blob/1285131e3eb28ab6f5f62a7c5fd3ffd7ce1e5eb8/CHANGELOG.md#v6113-2016-10-01

[npomfret]

Same here on node v6.3.1 but working on another machine running v6.4

[colinlmcdonald]

@mlazowik good find, looks like babel has changed the spec for object destructuring. I'm going to make a pull request unless you want to?

[mlazowik]

@colinlmcdonald making one right now :)

[CarringtonCreative]

confirming that @colinlmcdonald temp fix works

---

OSX El Capitan 10.11.6
npm 2.14.4
react 15.3.2
react-native 0.34.1

[ipsy-eric]

Since babylon seems to think point releases are ok for fundamental parsing strictness changes, maybe React Native should pin to exact versions of bablyon?

[npomfret]

What's the fix?

[NicolasLEBRUN-]

Same problem here.

[CarringtonCreative]

@npomfret

Deleting the trailing commas in

ListView.js @ line 457,
NavigationCard.js @ line 85,
MessageQueue.js @ line 390

Restart your package manager. If the changes don't take effect then try closing out Xcode and the simulator. Then reopen each of them.

[ipsy-eric]

The fix for me is a lot of monkey patching inside node_modules and pausing using continuous build tools for the weekend. And looking forward to the PR @mlazowik is making :)

[CarringtonCreative]

@npomfret

Here are the file paths:

node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js

node_modules/react-native/Libraries/CustomComponents/NavigationalExperimental/NavigationCard.js

node_modules/react-native/Libraries/Utilities/MessageQueue.js

[ipsy-eric]

@npomfret / @Carrington-Dennis -- lots of other node modules are going to be hit by this too. I suggest reloading the app and following the redbox errors to see where is affected, making PRs to those projects. As an example, react-native-vector-icons also got smacked by this babel change.

[mlazowik]

And use shrinkwrap.

[mankins]

@npomfret try the method @Carrington-Dennis suggests. Just confirmed it works until the rest gets sorted out.

[jkhustler]

confirming monkey patching works

[hzoo]

Yeah to confirm this is from https://github.com/babel/babylon/pull/149, https://github.com/babel/babylon/pull/149#issuecomment-250600885 in v6.11.3

Can do a patch now to rollback since it can be too much trouble to change.

[jnmandal]

@Carrington-Dennis last one is

node_modules/react-native/Libraries/Utilities/MessageQueue.js

not:

node_modules/react-native/Libraries/Utilities/ListView/MessageQueue.js

👀

[CarringtonCreative]

@jnmandal correct. Thank you. I just changed my original reply to

node_modules/react-native/Libraries/Utilities/MessageQueue.js

[hzoo]

Sorry about that yall - didn't intend to make a bad experience using react-native with those issues.

Released https://github.com/babel/babylon/issues/154 with v6.11.4 which reverts the issue. You'll need to reinstall babylon, which can be done with rm -rf node_modules/babylon and npm install again.

I think for most projects you don't compile node_modules (there's a dist/lib folder used in npm) so you're able to just fix the errors in your own application when it happens and you update. However, if another project's files cause errors it's basically out of your hands unless you change node_modules yourself. (I didn't think of this at the time).

[ipsy-eric]

Thanks @hzoo for the quick fix to the issue

[jbernard1]

@Carrington-Dennis Correct list of paths. Finally got my app working.

[loganfsmyth]

Keep in mind that while we're reverted this change, code that was broken by this is wrong per the spec and will eventually be a syntax error whenever Babel has a major version bump or introduces an alternate way to version parsing without breaking people this badly.

Like you can't do an array spread like this:

var [ a, b, ...c, ] = [1, 2, 3];

you can't do an object spread like this:

var { a, b, ...c, } = {a: 1, b: 2, other: 3 };

as the current object rest spec defines it: https://sebmarkbage.github.io/ecmascript-rest-spread/#Rest

[ide]

Closing since this issue has been fixed upstream with Babylon for now. Thanks for the context @loganfsmyth -- it makes sense that a trailing comma isn't needed after a rest variable since it will always be the last entry.

This is a codemod to strip the comma:

codemod -m --extensions=js --exclude-paths=node_modules '(\.\.\.[\w$]+)\s*,(\s*\})' '\1\2'

[mlazowik]

This regex does not catch all instances, as there can be comment(s) between trailing comma and }. Also this applies only to bindings and assignments, so a = should be somewhere in there.

[npomfret]

After this experience I think it's a good idea to never use wild cards in any dependency management. It only leeds to difficult to diagnose problems that hit you at unexpected times. The hours I've wasted thinking _"I didn't check any code in, why has this stopped working!?"_. At least with today's problem it just caused our builds just fail, but imagine the situation where a dependency update that got consumed silently at build time introduced a bug into your app. You've done nothing wrong, you didn't make any code changes, yet the app doesn't work. This has happened to me and it took days to figure out.

IMO - Updating dependencies, (no matter how trivial the change) should be done and committed to version control. It make it much easier to reason about failures of this nature. The convenience of wildcards in dependency management can be reproduced with a script that just brings the dependencies up to date.