I'm trying to setup server side rendering for my existing React project. Upon compiling the react-redux node module throws following error:

SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.module.exports.Object.defineProperty.value (server.js:737:18)


My webpack config looks like this:

const nodeExternals = require('webpack-node-externals');
const path = require('path');
module.exports = {
target: 'node',
externals: [nodeExternals()],
entry: path.resolve(__dirname, '..', 'src/server/index.js'),
output: {
path: path.resolve(__dirname, '..', 'dist'),
publicPath: '/dist/',
filename: 'server.js',
library: 'app',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
components: path.resolve(__dirname, '..', 'src/components')
}
},
module: {
rules: [
{
test: /.(js|jsx|mjs)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
},
{
test: /.scss$/,
loader: 'css-loader/locals'
},
{
test: /.(ttf|eot|otf|svg|png)$/,
loader: 'file-loader?emitFile=false'
},
{
test: /.(woff|woff2)$/,
loader: 'url-loader?emitFile=false'
}
]
}


};

And Im using the above webpack in my server to render react components on the server side. Please find the server file below:

const express = require('express');
const webpack = require('webpack');
const path = require('path');
const requireFromString = require('require-from-string');
const MemoryFS = require('memory-fs');
const serverConfig = require('../config/webpack.server.js');
const fs = new MemoryFS();
const outputErrors = (err, stats) => {
if (err) {
console.log('************ERRORS************');
console.error(err.stack || err);
if (err.details) {
console.error(err.details);
}
return;
}

const info = stats.toJson();
if (stats.hasErrors()) {
console.error(info.errors);
}
if (stats.hasWarnings()) {
console.warn(info.warnings);
}
};
console.log('(☺)Initializing server application');
const app = express();
console.log('(☺)Compiling bundle');
const serverCompiler = webpack(serverConfig);
console.log('(☺)Compiler initialized');
serverCompiler.outputFileSystem = fs;
console.log('(☺)Output filestream defined');
serverCompiler.run((err, stats) => {
outputErrors(err, stats);
const contents = fs.readFileSync(path.resolve(serverConfig.output.path, serverConfig.output.filename), 'utf8');
const app1 = requireFromString(contents, serverConfig.output.filename);
app.get('*', app1.default);
app.listen(3000);
console.log('(☺)Server listening on port 3000!');
});


import

1 Answer
1

I found the issue! It was because we had used absolute path to import the connect method from react-redux:

import connect from 'react-redux/es/connect/connect';


This will always point to your uncompiled node modules. Hence the we see the above ES6 error.

I replaced it with below statement and it started working fine.

import { connect } from 'react-redux';


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.