Webpack Dev Server, allow paths with `dot` in them

Question

In my React.js app I have a route like this:

/foo/foo.bar/foo

When I load this URL (clicking refresh on the browser), I get:

Cannot GET /foo/foo.bar/foo

I think the problem is that Webpack Dev Server thinks that this URL refers to a static asset and tries to load it.

How can I fix this problem? (I need the dot)

Answer 1

There's no need to set up a proxy, you can simply tell Webpack (or more specifically the connect-history-api-fallback that it uses) not to treat paths with dots in them as static assets by setting disableDotRule to true in your Webpack configuration:

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    }
  }
};