webpack-dev-middleware pass through for all routes

Question

I'm using webpack-dev-middleware along with a react app using react-router on the client.

All is well if i enter the application at the root /, but webpack-dev-middleware will not serve anything with a path, like '/my-route`

server.use(webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

I tried using a wildcard, which allows all paths to pass through and get the html page, but then it seems when the page requests the main.js, it now also gets the html page, instead of the packaged javascript.

server.use('/*', webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

The goal is that any route the server doesn't know about, gets the same content as the root, and then react-router will handle showing the correct view (or 404) on the client.

any help would be much appreciated.

Bunche

is that webpack dev server the final middleware after you register all of your routes? – Farlay

Answer 1

Try connect-history-api-fallback npm package, which is what webpack-dev-server uses under the hood for the same purpose.

This worked for me:

var history = require('connect-history-api-fallback');
server.use(history());
server.use(webpackDevMiddleware(compiler, {
  publicPath: '/'
}));

Mcmanus

Answer 2

I had this same issue and my solution was to update react-router-config and react-router-dom packages. No further actions required.

I went from 4.x to 5.0.1 (in both packages).

Cryohydrate