TypeError: serverRenderer is not a function

I don’t get the error until I try to load the page:

server.jsx:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { match } from 'react-router/es6';
import { ServerRoot } from 'Root';
import configureStore from 'store';
import cheerio from 'cheerio';

module.exports = function(indexHTML) {
    return function (req, res) {
        var routes = require('./routes.jsx');
        var store = configureStore();

        var css = [];

        match({
            routes: routes.default,
            location: req.originalUrl
        }, (error, redirectLocation, renderProps) => {
            if (error) {
                res.status(500).send(error.message)
            } else if (redirectLocation) {
                res.redirect(302, redirectLocation.pathname + redirectLocation.search)
            } else if (renderProps) {
                var body = ReactDOMServer.renderToString(
                    <ServerRoot store={store} renderProps={renderProps} onInsertCss={(...styles) => {
                        styles.forEach(style => css.push(style._getCss()));
                    }}/>
                );

                const state = store.getState();

                var $ = cheerio.load(indexHTML);

                $('#server-style').html(css.join(''));
                $('#redux-state').html('window.__REDUX_STATE__ = ' + JSON.stringify(state).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--') + ';');
                $('#app').html('<div>' + body + '</div>');

                res.set('content-type', 'text/html');
                res.send($.html());
                res.end();
            } else {
                res.status(404).send('Not found')
            }
        });
    }
}

app.js:

...
var webpack = require('webpack');
var clientConfig = require(path.join(__dirname, '/config/webpack.config.client.js'));
var serverConfig = require(path.join(__dirname, '/config/webpack.config.server.js'));
var devServerConfig = clientConfig.devServer;

app.use(serverConfig.output.publicPath, express.static(serverConfig.output.path));

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public/favicons')));

if (process.env.NODE_ENV === 'development') {
    var compiler = webpack(clientConfig);

    var serverCompiler = webpack([clientConfig, serverConfig]);

    const webpackDevMiddlewareInstance = require('webpack-dev-middleware')(compiler, devServerConfig);
    const webpackHotServerMiddlewareInstance = require('webpack-hot-server-middleware')(serverCompiler);

    app.use(webpackDevMiddlewareInstance);
    app.use(webpackHotServerMiddlewareInstance);

    if (devServerConfig.hot) {
        app.use(require('webpack-hot-middleware')(compiler, {
            log: console.log,
            path: '/__webpack_hmr',
            heartbeat: 10000
        }));
    }

    webpackDevMiddlewareInstance.waitUntilValid(function () {
        compiler.outputFileSystem.readFile(path.join(compiler.outputPath, 'index.html'), function (err, result) {
            if (err) throw err;

            ready(result);
        });
    });
} else
    ready(fs.readFileSync(path.join(__dirname, 'builds/client/index.html')));

function ready(indexHTML) {
    app.use('*', require('./builds/server/server.js')(indexHTML));
    ...
}

I may be doing something very wrong or incorrectly since I am still relatively new to all of this.

Thanks.

[elado]

about illegal operation on a directory error: if you have multi entry server, make sure to specify the chunkName:

entry: {
  index: './src/server.js',
},

app.use(webpackHotServerMiddleware(compiler, { chunkName: 'index' }));

@DragonFire353

[emmanuel-mendoza]

@richardscarrott I just tried your suggestion (these have been crazy days at work) and now it works like a charm, thank you!