Unexpected token react-router in express server - reactjs

Question

{
"name": "shopping-cart-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "karma start",
"start": "node server.js"
},
"author": "",
"license": "MIT",
"dependencies": {
"axios": "^0.9.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"body-parser": "^1.17.1",
"express": "^4.13.4",
"faker": "^4.1.0",
"marked": "^0.3.6",
"mongoose": "^4.9.6",
"nodemon": "^1.11.0",
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-bootstrap": "^0.31.0",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"expect": "^1.14.0",
"foundation-sites": "6.2.0",
"jquery": "^2.2.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.2",
"karma-mocha": "^0.2.2",
"karma-mocha-reporter": "^2.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"mocha": "^2.4.5",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"script-loader": "^0.6.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.13"
}
}
I am trying to implement server side routing for a react app i am working on. I am using react-router for this purpose. Here is part of my server.js code
const renderToString = require ('react-dom/server');
let match, RouterContext = require('react-router');
const routes = require ('/app/router');
const React = require('react');
app.get('*', (req, res) => {
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
markup = renderToString(<RouterContext {...renderProps}/>);
} else {
// otherwise we can render a 404 page
markup = renderToString(<NotFoundPage/>);
res.status(404);
}
// render the index template with the embedded React markup
return res.render('index', { markup });
}
);
});
//my webpack config file
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'./app/app.jsx'
],
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
modulesDirectories: [
'node_modules',
'./app/components'
],
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
},
sassLoader: {
includePaths: [
path.resolve(__dirname, './node_modules/foundation-sites/scss')
]
},
devtool: 'cheap-module-eval-source-map'
};
I get an unexpected token < at < RouterContext {...renderProps}/>.
I have looked over the tutorial am am working of off, but i am not so sure what i have done wrong. Any suggestion would be really appreciated

Answer 1

You are using the Babel presets react, es2015 and stage-0.
None of those presets includes the plugin you need to make the object spread syntax you are using work – this part of your code:
<RouterContext {...renderProps} />
You can fix your problem by adding the transform-object-rest-spread plugin to your Babel config like this:
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['transform-object-rest-spread']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
Don't forget to install the plugin using
npm install --save-dev babel-plugin-transform-object-rest-spread