Conflict with html-webpack-plugin on catch all route

[webpack]

Conflict with html-webpack-plugin on catch all route

[patrickheeney]

I ended up figuring this out: https://github.com/davezuko/react-redux-starter-kit/pull/202/files

Webpack Dev Server uses connect-history-api-fallback as a dependency. So after installing that and running it before the middleware, it handled things as expected.

[timsuchanek]

@patrickheeney Maybe this example can help

[patrickheeney]

If I am reading this right, it looks like you need to essentially index the filesystem to populate it with data before being able to read from it? We don't appear able to do this. How was this aspect designed to work?

[jonathaningram]

@timsuchanek unfortunately that example doesn't use html-webpack-plugin so index.html is actually just a plainly served file. The desired behaviour is that if index.html has the o.htmlWebpackPlugin... variables that it gets passed through html-webpack-plugin before being served.

[GreenGremlin]

I got this to work by rewriting all html requests to '/index.html', before the webpack middleware runs.

I'm using koa, but the solution should be similar for express.

const CONTENT_TYPE_HTML = 'text/html';

app.use(function* rewriteIndex(next) {
  if (this.accepts().toString().substr(0, CONTENT_TYPE_HTML.length) === CONTENT_TYPE_HTML) {
    this.request.url = '/index.html';
  }
  yield *next;
});

app.use(webpackDevMiddleware(compiler, {
...

• Watch out; accepts('html') will evaluate as true for content-type = */*, which will cause your js and css files to redirect as well.

[GreenGremlin]

Nice! It looks like that mw does basically the same thing, but with a few safety checks. Thanks!

[vesan]

@patrickheeney Cheers! This was the exact cure for my problems.

[Elyx0]

@patrickheeney Thanks for the link to your pull, it saved the day !

[GreenGremlin]

I wrote a more flexible alternative for koa, check it out. https://github.com/greengremlin/koa-mount-html

[halversondm]

This was very helpful, thank you.

[fourcolors]

super helpful thank you

[gordonk]

Thanks, saved me a headache

[jiuxiaosheng]

Thanks, this saved my day

[konekoya]

@patrickheeney Thank you! You just made my day.

[benz2012]

Almost 2 years since @patrickheeney posted his solution, so I wasn't sure that I was having the exact same issue, but after including the connect-history-api-fallback as described in his PR, before the middleware, I am incredibly grateful that I found this issue thread.