Unexpected Token Error

[dhaval-pankanis]

`SyntaxError: /home/rushikesh/Node_Applications/React-Twitter/snapterest/source/components/Application.react.js: Unexp
ected token (34:11)
32 | render:function () {
33 | return (

34 |

| ^
35 |

36 |

37 |
at Parser.pp$5.raise (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/lib/index.j
s:4246:13)
at Parser.pp.unexpected (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/lib/inde
x.js:1627:8)
at Parser.pp$3.parseExprAtom (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/lib
/index.js:3586:12)
at Parser.pp$3.parseExprSubscripts (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babyl
on/lib/index.js:3331:19)
at Parser.pp$3.parseMaybeUnary (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/l
ib/index.js:3311:19)
at Parser.pp$3.parseExprOps (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/lib/
index.js:3241:19)
at Parser.pp$3.parseMaybeConditional (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/bab
ylon/lib/index.js:3218:19)
at Parser.pp$3.parseMaybeAssign (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/
lib/index.js:3181:19)
at Parser.pp$3.parseParenAndDistinguishExpression (/home/rushikesh/Node_Applications/React-Twitter/snapterest/nod
e_modules/babylon/lib/index.js:3660:26)
at Parser.pp$3.parseExprAtom (/home/rushikesh/Node_Applications/React-Twitter/snapterest/node_modules/babylon/lib
/index.js:3545:19)
`

[ioan-ghisoi-cko]

For the current version of Babelify the syntax in the book is not supported but there is a quick fix:

1. inside /snapterest do npm install --save-dev babel-preset-react
2. inside /snapterest do npm install --save-dev babel-preset-es2015 babel-preset-react
3. replace:
   this :
   .transform(babelify)
   .transform(babelify)
   with this :
   .transform(babelify.configure({ presets: ["es2015", "react"] }))
   Shout out for wphampton for this ( choking on jsx syntax babel/babelify#126 )

[jeanabraham]

Thanks, I was running in the same issue (below), but this fix resolved it!

Syntax

Error: /Users/admin/dev/snapterest/source/app.js: Unexpected token (3:18)
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 | var listOfItems =

| ^
4 |
• Item 1

5 |
• Item 2

6 |
• Item 3

at Parser.pp$5.raise (/Users/admin/dev/snapterest/node_modules/babylon/lib/index.js:4333:13)
at Parser.pp.unexpected (/Users/admin/dev/snapterest/node_modules/babylon/lib/index.js:1705:8)
at Parser.pp$3.parseExprAtom (/Users/admin/dev/snapterest/node_modules/babylon/lib/index.js:3670:12)
at Parser.pp$3.parseExprSubscripts (/Users/admin/dev/snapterest/node_modules/babylon/lib/index.js:3414:19)
at Parser.pp$3.parseMaybeUnary (/Users/admin/dev/snapterest/node_modules/babylon/lib/index.js:3394:19)
....

[adrienthiery]

If it can help someone else, in my case this error showed up after I introduced an error in my code.

The error being in a react-native functional component :

export default function PaddingView(props) {
    return (
        <FlexView
            {...props}
            style={[
                styles.paddingOfView,
                props.style,
            ]}
        >
            {this.props.children} // In addition to being useless, I don't have `this.props` here, but just `props`. This was the error.
       </FlexView>
    );
}

[vbuch]

@adrienthiery your comment was the most useful one! :) Pointed me to my error in RN. I used {...this.props.someprop} instead of {{...this.props.someprop}} or just {this.props.someprop}. Thank you.
Haven't looked into babylon's code (more than finding out it is 8000 lines) but I wonder if it is possible for the unexpected token to provide info on the file being parsed.