简体   繁体   中英

React Isomorphic setup and Node ES6 syntax issue

I have included two questions here, the two questions will be at the end of this post.

=================>>> Background <<<=================

I'm trying to test out react isomorphic way, and I setup a server.js and I install the following node modules

my node version node: '0.12.0'

"babel": "^4.7.16",
"babel-core": "^4.7.16",
"babel-loader": "^4.2.0",
"babel-runtime": "^4.7.16",
"node-jsx": "^0.12.4",

The following is my server.js ( partial )

require("babel/register")({experimental: true});
require('node-jsx').install({extension:'.jsx'});

var express = require('express');
var server = express();
var port = process.env.PORT || 3000;

var React = require('react');
var EntryPointComponent = React.createFactory(require('./router.jsx'));

server.use(function(req, res, next) {
    var component = EntryPointComponent();
    var html = React.renderToString(component);
    res.send(html);
});

server.listen(port);

And below is example routes.jsx ( partial, it will be include in router.jsx )

var React  = require('react'),
    Router = require('react-router'),
    {Route, NotFoundRoute} = Router,
    App = require('./app'),
    DefaultHandler = require('./pages/test');

module.exports = (
  <Route handler={App}>
    <Route name="test" handler={DefaultHandler} path="/test" addHandlerKey={true} />
    <NotFoundRoute handler={DefaultHandler} />
  </Route>
)

The following is router.jsx

var React  = require('react'),
    Router = require('react-router'),
    routes = require('./routes');


Router.run(routes, function(Handler) {
    React.render(<Handler/>, document.getElementById("content"));
});

=================>>> Problem <<<=================

when I try to run the following command

node server.js --harmony

It will throw me Unexpected token issue

/blah/blah/blah/routes.jsx:3
    {Route, NotFoundRoute} = Router,
    ^
SyntaxError: Unexpected token {

=================>>> Questions <<<=================

  1. Looks like the Node didn't recognize the ES6 syntax, and I try to include "babel", am I use it correctly?? Or how to make Node understand ES6 syntax ??

  2. Is the above a correct way to setup isomorphic react app ?? Or what would be the correct / recommended way to setup the react app in isomorphic way ??

Any advice is appreciated, thanks.

You are 'overriding' babel loader by using 'node-jsx'. Docs .

//"there can be only one!" :)
require("babel/register")({experimental: true});

//to be removed
//require('node-jsx').install({extension:'.jsx'});

Node.js和io.js都不支持ES6解构分配。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM