ReactJS – Accident token React-Router in the Quick Server

{
 "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",< br /> "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"
 }
}

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(< br /> {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(); 
} else {
 // otherwise we can render a 404 page
 markup = renderToString();
 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')
 ]
 },< br /> devtool:'cheap-module-eval-source-map'
};

module: {
 loaders: [
 {
 loader:'babel-loader',
 query: {
 presets: ['react','es2015','stage-0'],
 plugins: ['transform-object-rest-spread']
 },
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/
 }
 ]
}

npm install --save-dev babel-plugin-transform-object-rest-spread

< pre>{
“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”,< br /> “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 the react application I am working on. I am using react-router For this purpose. This 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) => {< br />
 // 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);< br /> }

 // generate the React markup for the current route
 let markup;
 if (renderProps) {
 // if the current route matched we have renderProps
 markup = renderToString();
} else {
 // otherwise we can render a 404 page
 markup = renderToString();
 res.status(404);
 }
< br /> // 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 got an unexpected token .

I have reviewed the tutorial and I am working, but I am not sure what I am doing wrong. Any suggestions would be greatly appreciated

You are using Babe l Presets react, es2015 and stage-0.

None of these presets contains the plugins you need to use object spread syntax – this part of the code:

< /p>

You can solve your problem by adding the transform-object-rest-spread plugin to your Babel configuration as shown below :

module: {
 loaders: [
 {
 loader:'babel-loader',
 query: {< br /> presets: ['react','es2015','stage-0'],
 plugins: ['transform-object-rest-spread']
 },
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/
 }
 ]
}

Don’t forget to install the plugin

p>

npm install --save-dev babel-plugin-transform-object-rest-spread