Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Middleware + HtmlWebpackPlugin usage quirk. #142

Closed
kirill-konshin opened this issue Oct 16, 2016 · 4 comments
Closed

Middleware + HtmlWebpackPlugin usage quirk. #142

kirill-konshin opened this issue Oct 16, 2016 · 4 comments

Comments

@kirill-konshin
Copy link

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
Copy link
Member

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

@SpaceK33z
Copy link
Member

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
Copy link
Author

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

@asadsahi
Copy link

asadsahi commented Feb 22, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants