Search code examples
reactjsbrowserifybabeljs

Why I keep get error like unexpected token when follow React.js tutorial


[UPDATE]: It turns out that I did not follow exactly as official sites says, which means I need add "[ ]" in the command.


All:

I am pretty new to react.js, when I follow official site tutorial, the steps I used is:

A. Build a file main.js

B. npm install -g browserify

C. npm install --save react react-dom babelify babel-preset-react

D. browserify -t babelify --presets react main.js -o bundle.js

Then I get error like:

SyntaxError: c:/Temp/web/lnreact/main.js: Unexpected token (6:2)
  4 |
  5 | ReactDOM.render(
> 6 |   <h1>Hello, world!</h1>,
    |   ^
  7 |   document.getElementById('example')
  8 | );
    at Parser.pp.raise (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\node_modul
es\babylon\index.js:1413:13)
    at Parser.pp.unexpected (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\node_
modules\babylon\index.js:2895:8)
    at Parser.pp.parseExprAtom (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\no
de_modules\babylon\index.js:746:12)
    at Parser.pp.parseExprSubscripts (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-c
ore\node_modules\babylon\index.js:501:19)
    at Parser.pp.parseMaybeUnary (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\
node_modules\babylon\index.js:481:19)
    at Parser.pp.parseExprOps (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\nod
e_modules\babylon\index.js:412:19)
    at Parser.pp.parseMaybeConditional (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel
-core\node_modules\babylon\index.js:394:19)
    at Parser.pp.parseMaybeAssign (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core
\node_modules\babylon\index.js:357:19)
    at Parser.pp.parseExprListItem (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-cor
e\node_modules\babylon\index.js:1224:16)
    at Parser.pp.parseCallExpressionArguments (c:\Temp\web\lnreact\node_modules\babelify\node_module
s\babel-core\node_modules\babylon\index.js:577:20)

I am wondering where did I do wrong?

Thanks


Solution

  • You do not appear to be running the command given in the tutorial. The correct command to run browserify should be this:

    $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js