webpack-dev-middleware can't Hot Reload on route's path

Question

I'm putting webpack-dev-middleware on my express route which points to /login with this:

(async () => {
        const [
            {default: webpack},
            {default: webpackMW},
            {default: webpackHMR},
            {default: webpack_login_cfg}
        ] = await Promise.all([
            import('webpack'),
            import('webpack-dev-middleware'),
            import('webpack-hot-middleware'),
            import('../cfg/wp_hmr_login.js')
        ]),
        compiler = webpack(webpack_login_cfg)
        router.use(webpackMW(compiler, { publicPath: '/'}))
        router.use(webpackHMR(compiler))
    })()

webpack middleware works but hot reloading doesn't. In wp_hmr_login.js, I make use of html-webpack-plugin and set publicPath: '/login/' which equals to publicPath: '/' in middleware's config (I already tried setting these two to everything else, including output.publicPath, '', '/', removing it etc but they all give me "cannot GET /xxx" because the bundle have a different location to what html plugin expects). In logs, you can see why hot reloading isn't working: GET /login/login.b0139afc0a4838fcda0e.hot-update.json 404. Looks like webpack is putting or looking for hot-update.json in the wrong place. I tried looking for the file at /main.b0139afc0a4838fcda0e.hot-update.json but it doesn't seem to be there at all. One important note is that the same code structure works perfectly on my index route, which points to /. Any idea on how to get around this would be very interesting to look at.

EDIT: I discovered that by adding ?path=/login at the end of ['webpack-hot-middleware/client... removes the 404 on hot-update.json, I can in fact now see in the console:

asset login.893cfc7bf76f6dbbc8a2.hot-update.js 3.19 KiB [emitted] [immutable] [hmr] (name: login)
asset index.html 426 bytes [emitted]
asset login.893cfc7bf76f6dbbc8a2.hot-update.json 29 bytes [emitted] [immutable] [hmr]

but hot-reloading still doesn't work on routes different to '/'

score 0 · Answer 1 · answered Dec 13 '21 at 12:42

I found how to solve this and report it here for anyone having the same issue:

added ?dynamicPublicPath=true at the end of [webpack-hot-middleware/client... as its only parameter and set the output publicPath to the route's path, in this specific case /login/.

webpack-dev-middleware can't Hot Reload on route's path

1 Answers1