react-native: Creating new project fails

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):

├─ yargs-parser@4.2.1
└─ yargs@6.6.0
✨  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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 30
  • Comments: 54 (9 by maintainers)

Most upvoted comments

npm uninstall babylon && npm install babylon@6.15.0

Stop +1 noise. Thanks.

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*

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"

+5 (the entire team is frustrated)

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

Looking into it now.

(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

@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 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.