TypeError: Cannot read property 'replace' of undefined

[maurocolella]

Hi,

First of all thank you. This library seems like a great option and I enjoyed your tutorial.

Now: when I try to createIsomorphicWebpack(config);

Compilation fails and I get the error above.

server.js

import path from 'path';
import webpack from 'webpack';
import express from 'express';
import config from './webpack.config';
import {
  createIsomorphicWebpack
} from 'isomorphic-webpack';

// import render from './src/index.server.jsx';

const app = express();
const compiler = webpack(config);
// createIsomorphicWebpack(config);

app.set('views', './src/views');
app.set('view engine', 'ejs');

app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {

    res.render('index', { html: '' });
});

app.listen(3000, function(err) {
    if (err) {
        return console.error(err);
    }

    console.log('Listening at http://localhost:3000/');
});

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        app : [
            'webpack-hot-middleware/client',
            'babel-polyfill',
            './src/index.client.jsx'
        ],
        vendor : [
            'react',
            'react-dom',
            'react-router-dom'
        ]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new UglifyJSPlugin({
            parallel: true,
            sourceMap: false,
            uglifyOptions: {
                ie8: false,
                compress: true
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // Specify the common bundle's name.
        })
    ],
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'src')
        }, {
            test: /\.css$/,
            loader: 'style-loader'
        }, {
            test: /\.css$/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        }, {
            test: /\.scss$/,
            loader: 'style-loader'
        }, {
            test: /\.scss$/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        }, {
            test: /\.scss$/,
            loader: 'sass-loader',
            query: {
                outputStyle: 'expanded'
            }
        }, {
            test: /\.(jpg|png|svg)$/,
            loader: 'url-loader',
            options: {
                limit: 25000,
            }
        }]
    }
};

[maurocolella]

Apparently, the issue was due to not outputting source maps for bundles.

I migrated to Webpack 3 (which gave a clearer error output for that case); then I set UglifyJS options to output source maps, and the issue is resolved.

[maurocolella]

Actually: I am getting further with the new configuration, but I see no output from isomorphic-webpack. And server rendering fails on the chunking (ReferenceError : webpackJsonp is not defined).

The code is on that branch: https://github.com/maurocolella/__new_me/tree/feature/add-isomorphic-rendering