Webpack-hot-middleware: Error on subpath/subroute

[sarincasm]

This works great when I am on the home page or a single level down on the URL -
for eg:
works for http://localhost:8080
works for http://localhost:8080/app

However, when I am on a page like
http://localhost:8080/app/1

I get an error. When inspecting using the network tab on dev console - I see that it is trying to fetch a route which looks like /app/{}.hot-update.json rather than /{}.hot-update.json
which is why it doesn't match the express route.

Not sure if this is an error with my config or some known issue.
Thanks

[glenjamin]

This is likely to be a problem with your publicPath webpack setting

[sarincasm]

Hi.. thanks for your reply

here is what my setup looks like

Express route - server.js

const webpackConfig = require('./webpack.config').devConfig
            , webpack = require('webpack')
            , compiler = webpack(webpackConfig)

app.use(webpackDevMiddleware(compiler, {
            noInfo: false,
            publicPath: '/',
            filename: 'bundle.js',
            historyApiFallback: true,
            hot: true,
            stats: {colors: true}
        }))

Inside webpack.config.js

const srcDir = path.join(__dirname, 'public/jsx/')

const devConfig = {
    context: srcDir,
    entry: [
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './entry.js'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: srcDir,
                loaders: ['react-hot-loader', 'babel-loader']
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

Should public path be something else ?

[beck]

Had same issue, adding devConfig.output.publicPath = '/' fixed it for me. ¯\_(ツ)_/¯

[beck]

Reading the docs on public path config, it seems like setting publicPath to / should not be a requirement for hot reloading to work and this is indeed a bug in the middelware.

[sarincasm]

thanks @beck worked for me too

[danielstorey]

I had the same problem and can confirm that adding publicPath: "/" to my webpack config output fixed it.