SyntaxError: Unexpected token import in node_modules

Question

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!');
});

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 we see the above ES6 error.

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

import { connect } from 'react-redux';