Peter G.
Peter G.

Reputation: 8034

Babylon syntax error with react native

I am getting this cryptic looking error in React Native. Tried reinstalling my packages with npm and checking my own code syntax, but without any progress.

The console log only refers to this file: node_modules/babylon/lib/index.js

What is the likely cause and how to get more debug info about this error?

~/ReactNativeProject/node_modules/react-native/packager ~
Scanning 576 folders for symlinks in /Users/user/ReactNativeProject/node_modules (15ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/user/ReactNativeProject 

[01/31/2017, 18:22:20] <START> Initializing Packager
[01/31/2017, 18:22:20]         HMR Server listening on /hot

React packager ready.

[01/31/2017, 18:22:21] <START> Building Haste Map
[01/31/2017, 18:22:21] <END>   Building Haste Map (248ms)
[01/31/2017, 18:22:21] <END>   Initializing Packager (1083ms)
[01/31/2017, 18:22:38] <START> Requesting bundle
                               bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[01/31/2017, 18:22:38] <START> Transforming files
transformed 422/460 (92%)/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4336
  throw err;
  ^

SyntaxError: Unexpected token (23:1)
    at Parser.pp$5.raise (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4333:13)
    at Parser.pp.unexpected (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:1705:8)
    at Parser.pp$3.parseIdentifier (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4211:10)
    at Parser.pp$3.parsePropertyName (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4031:96)
    at Parser.pp$3.parseObj (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3947:12)
    at Parser.pp$3.parseExprAtom (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3639:19)
    at Parser.pp$3.parseExprSubscripts (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3414:19)
    at Parser.pp$3.parseMaybeUnary (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3394:19)
    at Parser.pp$3.parseExprOps (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3324:19)
    at Parser.pp$3.parseMaybeConditional (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3301:19)
transformed 442/506 (87%)/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4336
  throw err;
  ^

SyntaxError: Unexpected token (23:1)
    at Parser.pp$5.raise (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4333:13)
    at Parser.pp.unexpected (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:1705:8)
    at Parser.pp$3.parseIdentifier (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4211:10)
    at Parser.pp$3.parsePropertyName (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4031:96)
    at Parser.pp$3.parseObj (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3947:12)
    at Parser.pp$3.parseExprAtom (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3639:19)
    at Parser.pp$3.parseExprSubscripts (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3414:19)
    at Parser.pp$3.parseMaybeUnary (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3394:19)
    at Parser.pp$3.parseExprOps (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3324:19)
    at Parser.pp$3.parseMaybeConditional (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3301:19)
transformed 483/542 (89%)/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4336
  throw err;
  ^

SyntaxError: Unexpected token (23:1)
    at Parser.pp$5.raise (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4333:13)
    at Parser.pp.unexpected (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:1705:8)
    at Parser.pp$3.parseIdentifier (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4211:10)
    at Parser.pp$3.parsePropertyName (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:4031:96)
    at Parser.pp$3.parseObj (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3947:12)
    at Parser.pp$3.parseExprAtom (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3639:19)
    at Parser.pp$3.parseExprSubscripts (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3414:19)
    at Parser.pp$3.parseMaybeUnary (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3394:19)
    at Parser.pp$3.parseExprOps (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3324:19)
    at Parser.pp$3.parseMaybeConditional (/Users/user/ReactNativeProject/node_modules/babylon/lib/index.js:3301:19)
transformed 691/694 (100%)

Upvotes: 0

Views: 739

Answers (1)

Peter G.
Peter G.

Reputation: 8034

The problem was with the render() method of one of the React Native components and the use of a spread operator in the wrong place,

render(){
    return (
      <View>
        {...this.props.children}
      </View>
    )
  }

had to be changed to

render(){
    return (
      <View>
        {this.props.children}
      </View>
    )
  }

Upvotes: 1

Related Questions