HistoryApiFallback not working on Webpack 4 (with React Router 4 and nested routes)

Question

Context: Trying out RR4 with webpack 4 (devServer: {apiHistoryFallback: true} Sample Webpack 4 config

http://localhost:8080/reports works when cut and pasted into the address bar (aka history fallback is working) and I can click a link for /reports/8, as I have added a nested route to the component at /reports

<Route path=${match.path}/:reportId component={ReportDetail}/>

but cut and paste http://localhost:8080/reports/9 into the address bar and I get a blank screen and a: Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. Tried setting the contentBase for devServer but that didn't resolve the issue.

This functionality worked fine in Webpack 3 and RR3. Not sure whether to bark up the Webpack or React Router tree.

Similar issue to this one but for Webpack 3

Answer 1

Apparently adding:

<base href="/" />

to the head tag of your index.html is enough to fix this issue. Meep

Answer 2

I found out that if you add:

output: {
  publicPath: '/' 
}

to your webpack.config.js then you don't need to add

<base href="/" /> 

to index.html

see: webpack-dev-server, historyApiFallback not working (webpack-4, react-router-4)