Middleware + HtmlWebpackPlugin usage quirk.

[kirill-konshin]

When dev middleware is used with HtmlWebpackPlugin and in conjunction with server side rendering it leads to a very tricky setup.

Since index.html is processed and emitted into Webpack's output by HTML plugin, dev middleware picks it up despite the flag serverSideRender: true, because the file exists and it could be served and the middleware chain stops on that w/o a call to rendering middleware.

I have found a weird solution to it: I changed index option to something non-existent so that dev middleware is not able to find it in memory fs and passes control to next middleware:

const MemoryFileSystem = require("memory-fs");
const compiler = webpack(config);

compiler.outputFileSystem = new MemoryFileSystem();

// !!! notice that I have to change index to something nonexistent 
app.use(webpackMiddleware(compiler, {serverSideRender: true, index: "nonexistent.html"})); 
app.use(handleRender({fs: compiler.outputFileSystem}));

With this setup I can use HTML plugin's output and put Redux state and rendered HTML into it.

It works OK, but looks a bit awkward, so maybe something could be done to make it look more pretty.

[SpaceK33z]

The serverSideRender flag is still experimental (perhaps the readme should've mentioned this). #118 provides interesting reading material about this flag.

[SpaceK33z]

Also, it seems like you're including the index.html file AND including that with htmlWebpackPlugin. So the same file is rendered by htmlWebpackPlugin, and also served in-memory. You should exclude that file from your bundle by not require-ing it in your bundle. If you do that, there shouldn't be an issue.

[kirill-konshin]

I have checked, I don't have index.html required or referenced anywhere else except in HtmlWebpackPlugin configuration.

[asadsahi]

Ran into the same issue while trying to add SSR into react-boilerplate based setup.