Can't load JS bundle on route in React - reactjs

Question

I have a React app, using webpack. I have added React Router 3 and when trying to visit a route in my app, I get a 404 on the .JS files when on anything but the initial route.
My application is also using a basename as I must prepend the application path.
Routes
import React from 'react'
import Loadable from 'react-loadable'
import { Router, Route, IndexRoute, IndexRedirect } from 'react-router'
import App from './components/App'
const AsyncRoute = loader =>
Loadable({
loader,
loading: () => <h3>Loading...</h3>,
delay: 300,
})
const LandingPage = AsyncRoute(() => import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage'))
export default ({ history }) => (
<Router history={history}>
<Route path="/:tenant" component={App}>
<IndexRoute component={LandingPage} />
<Route path="foo" component={LandingPage} />
</Route>
</Router>
)
Index
import React, { Fragment } from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import store from './store'
import Router from './routes'
const historyConfig = { basename: '/content-manager' }
const browserHistory = useRouterHistory(createBrowserHistory)(historyConfig)
const history = syncHistoryWithStore(browserHistory, store)
render(
<Provider store={store}>
<Fragment>
<Router history={history} />
</Fragment>
</Provider>,
document.getElementById('root')
)
Webpack.dev
const PORT = process.env.SERVER_PORT || 3000
const HOST = process.env.SERVER_HOST || '127.0.0.1'
module.exports = {
devtool: 'inline-source-map',
mode: 'development',
output: {
filename: '[name].[hash].js',
publicPath: '',
},
devServer: {
host: 'localhost',
port: process.env.PORT || 3200,
historyApiFallback: true,
hot: false,
open: true,
proxy: {
'/api/**': {
target: `http://${HOST}:${PORT}`,
pathRewrite: { '^/api': '' },
secure: false,
logLevel: 'debug',
},
},
},
}
Webpack.common
const commonPaths = require('../common-paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
context: commonPaths.appPath,
entry: ['babel-polyfill', './index.jsx'],
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{ test: /\.(jsx?)$/, exclude: /node_modules/, use: ['babel-loader'] },
],
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'initial',
test: 'vendor',
name: 'vendor',
enforce: true,
},
},
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'Web App',
template: commonPaths.projectRoot + '/public/index.html',
inject: 'body',
}),
new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: process.env.NODE_ENV === 'prod',
}),
new Dotenv(),
],
};
If I visit http://app.local/content-manager/foo in the browser, the landing page will load.
If I then trying and navigate to http://app.local/content-manager/foo/edit the application does not load and I see the following in the console
GET http://app.local/content-manager/foo/main.fdb34ff55bc02a8cd347.js 404 (Not Found)
edit:1 Refused to execute script from 'http://app.local/content-manager/foo/main.fdb34ff55bc02a8cd347.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I believe on the initial route, it is trying to find the js bundle at http://app.local/content-manager but then when I move to a sub route it is looking in http://app.local/content-manager/foo

Answer 1

So I have added
<base href="/content-manager/" />
into my index.html and now it seems to work....