babel-node无法识别jsx

Question

I am trying to run some code that uses React and JSX using babel-node , which is part of the babel-cli . To the best of my knowledge the code is correct and I am using babel-node as expected, but hopefully someone can provide more insight.

The following error is generated.

(!535)-> babel-node server.js
/Users/eprouty/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:520
      throw err;
      ^

SyntaxError: /Users/ep/git/dgcastle/server.js: Unexpected token (60:51)
  58 |                 res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
  59 |             } else if (renderProps) {
> 60 |                 var html = ReactDOM.renderToString(<RoutingContext {...renderProps} />);
     |                                                    ^
  61 |                 var page = jade.renderFile('views/index.jade', {html: html});
  62 |                 res.status(200).send(page);
  63 |             } else {
    at Parser.pp.raise (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:507:12)
    at Parser.pp.parseExprSubscripts (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:260:19)
    at Parser.pp.parseMaybeUnary (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:240:19)
    at Parser.pp.parseExprOps (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:171:19)
    at Parser.pp.parseMaybeConditional (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:153:19)
    at Parser.pp.parseMaybeAssign (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseExprListItem (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:966:16)
    at Parser.pp.parseCallExpressionArguments (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:336:20)

I can provide additional code snippets if that would help but the offending block is already included in the error message. Thanks for any insight you can provide!

Answer 1

If you are running version 6.x of babel, you need to use the babel react preset (as stated here ).

If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run npm install -g babel babel-preset-react and then run babel --presets react --watch src/ --out-dir lib/ . For more information: check out the babel 6 blog post