React-native: Creating new project fails

[jeroenbourgois]

Description

I did a fresh install following the instructions on https://facebook.github.io/react-native/docs/getting-started.html#content, but it fails at the first step:

react-native init AwesomeProject

This results in this output (the packages are installed properly with yarn):

├─ [email protected]
└─ [email protected]
✨  Done in 5.86s.
/private/tmp/test/AwesomeProject/node_modules/babel-core/lib/transformation/file/index.js:600
      throw err;
      ^

SyntaxError: /private/tmp/test/AwesomeProject/node_modules/react-native/packager/react-packager/src/node-haste/index.js: You can only use Class Properties when the 'classProperties' plugin is enabled. (389:2)
  387 |   }
  388 |
> 389 |   static Cache;
      |   ^
  390 |   static Module;
  391 |   static Polyfill;
  392 |   static getAssetDataFromName;
    at Parser.pp$5.raise (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:4380:13)
    at Parser.pp$1.parseClassProperty (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:2508:10)
    at Parser.parseClassProperty (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:5947:20)
    at Parser.pp$1.parseClassBody (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:2424:34)
    at Parser.pp$1.parseClass (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:2361:8)
    at Parser.pp$1.parseStatement (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:1798:19)
    at Parser.parseStatement (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:5719:22)
    at Parser.pp$1.parseBlockBody (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:2223:21)
    at Parser.pp$1.parseTopLevel (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:1733:8)
    at Parser.parse (/private/tmp/test/AwesomeProject/node_modules/babylon/lib/index.js:1628:17)

Additional Information

I first thought it was a node problem so I reverted from 7.6.0 to the 6.10.0 LTS version, same result.

• React Native version: ->

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

• Platform: both
• Operating System: MacOS

[kafkadev]

+1

[odemolliens]

+1

[Kraignos]

+1

[jmz331]

+1 same problem.

[UtkarshPramodGupta]

+1

[kumarpatel]

+1

[aliuspetraska]

+1

[BuiTruongXuan]

+1

[simonjk]

+1

[zphhhhh]

+1

[marcosiino]

Lol, i'm just trying ReactNative now, and saw this strange error...so i've found this. Perfect timing! :) Btw, since i'm a beginner in ReactNative (just trying it now), how can i install the previous version of the cli which is not affect by this bug, using brew on mac, so that in the meanwhile i can try it ? (i've already installed the last cli, so i don't know if i first need to remove it). Someone can help me? Thanks!

[nikolay-radkov]

+1

[idancali]

+5 (the entire team is frustrated)

[bluedusk]

+1

[agenciafera]

+1

[KaanErkol]

+1

[aliuspetraska]

@grabbou please take a look

[TheBlackHacker]

+1

[simonjk]

This change was done on the file in question 3h ago so it should be the primary suspect:
https://github.com/facebook/react-native/commit/4a4dddbfdcebc71f0828654154b6d4a27b448df0

[gmh04]

+1

[gamer496]

+1

[vaxo-m]

+1

[idancali]

Found the bug people. Babylon (6.16.0 published an hour ago) messed something up. If you use 6.15.0 it works.

So if you just add this to your dependencies in your package.json file, you're good to go.

"babylon": "6.15.0"

[grabbou]

Thanks, will let the team know we got a problem.

Follow: https://twitter.com/grabbou/status/834770049382629377

[kumarpatel]

npm uninstall babylon && npm install [email protected]

[craigedmunds]

+1

[carlosroberto555]

+1

[MoOx]

Stop +1 noise. Thanks.

[shmakovdima]

+1

[chapati23]

+1 is the broken window effect of the developer world

[hzoo]

Looking into it now.

[sunruh]

@hzoo I suspect it to come from PR https://github.com/babel/babylon/pull/300

The changelog states

Don't parse class properties without initializers when classProperties is disabled and Flow is enabled (#300) (Andrew Levine)

Ensure that you enable the classProperties plugin in order to enable correct parsing of class properties. Prior to this version it was possible to parse them by enabling the flow plugin but this was not intended the behaviour.

If you enable the flow plugin you can only define the type of the class properties, but not initialize them.

[hzoo]

Awesome, need to figure out what react-native is doing

[georginio]

+1

[voidale]

@kumarpatel doesn't seems to work for me any other ideas for temp fix?

[diegorodriguesvieira]

+1

[mintyowl]

Operating System: Windows 10 64bit

[chapati23]

temp fix possibly forking react-native and restraining babylon version to 6.15 in the 2 package.json's?
• https://github.com/facebook/react-native/blob/564126f2bf23f87bc80d9d02c7a9ed227dd1bb4e/package.json#L142
• https://github.com/facebook/react-native/blob/13edf6da2b8090c1b0bfa5fde4354fbfb24e6b4e/packager/package.json#L18

[simonjk]

was there any change. it is working now for me including babylon 6.16
$ npm list | grep react-native
├─┬ [email protected]
├─┬ [email protected]
$ npm list | grep babylon
│ ├── [email protected]

[chapati23]

interesting, what os / node / react-native-cli versions @simonjk ?

[hzoo]

Yes the workaround should be to pin to [email protected]

Ok I have to work, so going to revert the 2 PRs and do a patch.

EDIT: Interesting how many people rely on Babel without any full time people working on it

[dfischer]

(sorry for OT) Well, if there's one thing to say it's interesting (and awesome) to see how many people are trying to get up and running with a tutorial and at the frequency. I just ran into this too. 👍 thanks for the quick response @hzoo

[rizwanahmed19]

+1

[hzoo]

Yeah @dfischer, I'm really sorry this is the experience people get when starting out with react-native/javascript/open source. We make mistakes

[dfischer]

It's all good, I think it's cool how many people are reporting in. Good work @hzoo you rock!

[robdonn]

@hzoo Actually I think this is a really good experience for new people because it shows how quickly a problem can get resolved in a well supported project.

[hzoo]

Releasing v6.16.1 until we actually can get the time to figure this out.

Ok made a new patch release that just reverts the PRs that caused the issues.

If you need to you'll need to rm -rf node_modules and npm install again. You don't need to add babylon to dependencies if you did before if this fixes it.

report back if it's fixed*

[futurechallenger]

cool! @hzoo

[zyhou]

Good for me, it's work :)

Thanks @hzoo

[IAmFledge]

🎉 - Back in business!

Using yarn v0.20.3
Installing react-native...
...
...
✨  Done in 9.76s.
To run your app on iOS:
...

[kafkadev]

Thanks @hzoo

[sunruh]

@simonjk @chapati23 If the haste map has been generated once with a babylon version that's working and no change requires regeneration, it keeps workng even if you upgrade babylon again.

[simonjk]

@chapati23 MacOS 10.11.6

react-native --version
react-native-cli: 2.0.1
react-native: 0.41.2

node --version
v7.4.0

had the problem first too but after a rm of the folder and a re-init it the problem was suddenly gone

[jeroenbourgois]

@hzoo @grabbou and everyone involved: thanks! Amazing how fast this was resolved!