webpack-dev-server: hot-update.json 404 (Not Found)

PR welcome

@josh08h how about this?

const path = require('path')

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, 'bundle.js'),
+ output: {
+   publicPath: 'http://0.0.0.0:9000/dist/',
+ },
  devServer: {
    contentBase: __dirname,
-   publicPath: '/dist/',
    compress: true,
    port: 9000,
    hotOnly: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  }
}

We have to change the port which provides hot-update from 8080 to 9000 even if we access localhost:8080.

set a publicPath in your ‘output’ and ‘devserver’ which is the URL of output.path from the view of the HTML page.

try

    devServer: {
        host: '0.0.0.0', port: 8080,
        public: '0.0.0.0:8080',
    }

maybe useful

I’d just like to second that I believe am running into this problem(or a similar one) as well. My webpack config is as follows:

const webpack = require('webpack');
const path = require('path');
const proxy = 'localhost:22850/clients/dev/default.aspx/'

module.exports = {
	entry: [
		'react-hot-loader/patch',
		'./components/App.js',
		'./css/main.scss'
	],
	mode: 'development',
	module: {
		rules: [
		  {
			test: /\.(js|jsx)$/,
			exclude: /node_modules/,
			use: ['babel-loader']
			},
			{
				test: /\.(scss|sass|css|)$/,
				use: [
					'style-loader',
					"css-loader",
					"sass-loader"
				]
			},
			{
				test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 8192,
							fallback: 'file-loader',
							relativePathName: true,
							publicPath: 'http://localhost:8080/'
						}
					}
				]
			}
		]
	  },
	  resolve: {
			extensions: ['*', '.js', '.jsx',  '.png', '.woff', '.woff2']
	  },
	output: {
		path: path.resolve(__dirname, '/dist'),
		filename: 'bundle.js',
		publicPath: '/'
	},
	devtool: 'source-map',
	devServer: {
		// https://stackoverflow.com/questions/43544077/react-with-typescript-hot-reload-iis-webserver
		proxy: {
			'*' : {
				target: 'http://' + proxy
			}
		},
		port: 8080,
		host: '0.0.0.0',
		publicPath: 'http://localhost:8080',
		hot: true,
		headers: {'Access-Control-Allow-Origin': '*'}
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NamedModulesPlugin(),
		new webpack.NoEmitOnErrorsPlugin()
	],
	node: {
		console: true // needed for html5-history package
	}

When using hotOnly: true, the hotupdate is using localhost:22850 and 404’s, but if I manually make the get request using localhost:8080 I receive a response.

While this is not at all a solution to the issue, if you just want to hack your way around it to get the hot-update.json working again - this is what I did. My issue was that I am running my (vue) devServer on a different port (and url) as I want to run it under https.

What I did was to simply edit the node_modules/webpack/lib/web/JsonpMainTemplate.runtime.js file manually. Horrible, but it works for me 😉 . I’m showing the methods here, but, to be clear I only edited this line and this line.

In the hotDownloadUpdateChunk I just fixed the src attribute manually.

	function hotDownloadUpdateChunk(chunkId) {
		var script = document.createElement("script");
		script.charset = "utf-8";
		script.src = 'https://fake.vueserver:8080/' + $hotChunkFilename$;
		if ($crossOriginLoading$) script.crossOrigin = $crossOriginLoading$;
		document.head.appendChild(script);
	}

And similarly in the hotDownloadManifest method.

	// eslint-disable-next-line no-unused-vars
	function hotDownloadManifest(requestTimeout) {
		requestTimeout = requestTimeout || 10000;
		return new Promise(function(resolve, reject) {
			if (typeof XMLHttpRequest === "undefined") {
				return reject(new Error("No browser support"));
			}
			try {
				var request = new XMLHttpRequest();
				var requestPath = 'https://fake.vueserver:8080/' + $hotMainFilename$;

yep, it is bug, need search way how we can solve this without breaking

Mid-September 2020

FWIW something about Chrome’s recent update has been broken a few things for me, and this is a new issue for us. We were able to get everything working again by restarting the browser.

Somebody can create minimum reproducible test repo?

@evilebottnawi Here: https://github.com/Loonride/webpack-issue-repro

I have solved the issue here: https://github.com/webpack/webpack-dev-server/pull/2055. It is on next because there are potential breaking changes.

Somebody can create minimum reproducible test repo?

Invalid configuration, please create minimum reproducible test repo

I’m actually getting this same error but everything seems to be served from the right url and the file is available on the server side. It just ends up with a 404, does anyone else have this issue? My app is running on a docker container if that is relevant

Reproducible repo: https://github.com/krzystof/webpack-issue-repro

Duplicate https://github.com/webpack/webpack-dev-server/issues/1785?