hot-update.json 404 when visiting subpath

[GaoYYYang]

Bug report

What is the current behavior?
When I use HMR。 My server.js is :
`

let hotMiddleware = `${require.resolve('webpack-hot-middleware/client')}?path=/__webpack_hmr&timeout=20000`;
if (Object.prototype.toString.call(webpackConf.entry) === '[object Array]') {
    webpackConf.entry.push(hotMiddleware);
} else {
    for (var key in webpackConf.entry) {
        webpackConf.entry[key] = [hotMiddleware].concat(webpackConf.entry[key]);
    }
}
webpackConf.plugins.push(new webpack.HotModuleReplacementPlugin());

let publicPath = 'http://localhost:8080/';

const compiler = webpack(webpackConf);

const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
    publicPath: publicPath,
    quiet: true,
    stats: {
        colors: true
    }
});
app.use(webpackDevMiddlewareInstance);

app.use(webpackHotMiddleware(compiler, {
    path: '/__webpack_hmr'
}));
`

When I visit http://localhost:8080/page/index.html. When HMR happens, hotDownloadManifest will be called. But it will request http://localhost:1314/page/beb602dcf863eb7ba6e4.hot-update.json instead of http://localhost:1314/beb602dcf863eb7ba6e4.hot-update.json. It will receive 404.

I fount that in webpack/lib/web/JsonpMainTemplate.runtime.js, there's a function hotDownloadManifest:

`
...

		if (typeof XMLHttpRequest === "undefined") {
			return reject(new Error("No browser support"));
		}
		try {
			var request = new XMLHttpRequest();
			var requestPath = $require$.p + $hotMainFilename$; // this should lead to the root url
			request.open("GET", requestPath, true);
			request.timeout = requestTimeout;
			request.send(null);
		} catch (err) {
			return reject(err);
		}

...
`

When I change

var requestPath = $require$.p + $hotMainFilename$;

to

var requestPath = '/' + $require$.p + $hotMainFilename$;

It works well.

Other relevant information:
webpack version: latest
Node.js version:
Operating System:
Additional tools:

[glenjamin]

This is related to the core webpack / dev middleware config, not hot middleware’s config. You probably need to ensure that publicPath in the compiler config and dev middleware config match up

…

On 10 Oct 2018, at 03:42, carlsirce ***@***.***> wrote: Bug report What is the current behavior? When I use HMR。 My server.js is : ` let hotMiddleware = `${require.resolve('webpack-hot-middleware/client')}?path=/__webpack_hmr&timeout=20000`; if (Object.prototype.toString.call(webpackConf.entry) === '[object Array]') { webpackConf.entry.push(hotMiddleware); } else { for (var key in webpackConf.entry) { webpackConf.entry[key] = [hotMiddleware].concat(webpackConf.entry[key]); } } webpackConf.plugins.push(new webpack.HotModuleReplacementPlugin()); let publicPath = 'http://localhost:8080/'; const compiler = webpack(webpackConf); const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, { publicPath: publicPath, quiet: true, stats: { colors: true } }); app.use(webpackDevMiddlewareInstance); app.use(webpackHotMiddleware(compiler, { path: '/__webpack_hmr' })); ` When I visit http://localhost:8080/page/index.html. When HMR happens, hotDownloadManifest will be called. But it will request http://localhost:1314/page/beb602dcf863eb7ba6e4.hot-update.json instead of http://localhost:1314/beb602dcf863eb7ba6e4.hot-update.json. It will receive 404. I fount that in webpack/lib/web/JsonpMainTemplate.runtime.js, there's a function hotDownloadManifest: ` ... if (typeof XMLHttpRequest === "undefined") { return reject(new Error("No browser support")); } try { var request = new XMLHttpRequest(); var requestPath = $require$.p + $hotMainFilename$; // this should lead to the root url request.open("GET", requestPath, true); request.timeout = requestTimeout; request.send(null); } catch (err) { return reject(err); } ... ` When I change var requestPath = $require$.p + $hotMainFilename$; to var requestPath = '/' + $require$.p + $hotMainFilename$; It works well. Other relevant information: webpack version: latest Node.js version: Operating System: Additional tools: — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[arthurgeron]

see webpack/webpack-dev-server#1514 (comment)

[coconilu]

Hi, man.

You can see link: https://webpack.js.org/configuration/output/#outputpublicpath

When developing multi-page project, we can set output.publicPath to "/" to prevent compiler setting "*.hot-update.json" depend on url.

For instance:
visit http://localhost:9998/page2/index.html
it will receive hot-update.json like http://localhost:9998/page2/2f07d1a12be2c9111b86.hot-update.json
but set output.publicPath to "/"
it will receive http://localhost:9998/2f07d1a12be2c9111b86.hot-update.json

hope it can help you!

[eduardoabpereira]

actually it seems to be a problem when hot-update.json has a hash on filename, here, when I removed the [hash] and [id] from hot-update.json name, it worked fancy!