HMR gets 404 on each reload attempt

[aplex]

I've configured the hot reloading for rect/typescript/webpack app as described in the article.

Hot module reload detects that tsx file changes, but gets 404 error on each attempt to reload.

Here is a Chrome console log:

[HMR] connected
2016-12-16 00:58:09.721 client.js:128 [HMR] bundle rebuilding
2016-12-16 00:58:11.637 client.js:132 [HMR] bundle rebuilt in 1459ms
2016-12-16 00:58:11.637 process-update.js:27 [HMR] Checking for updates on the server...
2016-12-16 00:58:11.650 bootstrap 75ccdc1…:25 GET http://localhost:10831/dist75ccdc1c7fe918abfd64.hot-update.json 404 (Not Found)
2016-12-16 00:58:11.651 process-update.js:37 [HMR] Cannot find update (Full reload needed)
2016-12-16 00:58:11.651 process-update.js:38 [HMR] (Probably because of restarting the server)
2016-12-16 00:58:19.236 client.js:128 [HMR] bundle rebuilding
2016-12-16 00:58:21.637 client.js:132 [HMR] bundle rebuilt in 1061ms
2016-12-16 00:58:21.637 process-update.js:27 [HMR] Checking for updates on the server...
2016-12-16 00:58:21.645 bootstrap 75ccdc1…:25 GET http://localhost:10831/dist75ccdc1c7fe918abfd64.hot-update.json 404 (Not Found)
2016-12-16 00:58:21.645 process-update.js:37 [HMR] Cannot find update (Full reload needed)
2016-12-16 00:58:21.645 process-update.js:38 [HMR] (Probably because of restarting the server)

package.json dependencies:

  "devDependencies": {
        "@types/react": "^0.14.36",
        "@types/react-dom": "^0.14.17",
        "awesome-typescript-loader": "^2.2.4",
        "typescript": "2.1.1",
        "webpack": "^1.9.6",
        "webpack-dev-server": "^1.8.2",
        "aspnet-webpack": "^1.0.26",
        "aspnet-webpack-react": "^1.0.3",
        "webpack-hot-middleware": "^2.13.2",
        "sass-loader": "^4.1.0",
        "node-sass": "^4.0.0",
        "style-loader": "^0.13.1",
        "css-loader": "^0.26.1",
        "resolve-url-loader": "^1.6.1",
        "file-loader": "^0.9.0",
        "babel-loader": "^6.2.10" 
    },
    "dependencies": {
        "mobx": "^2.5.1",
        "mobx-react": "^3.5.6",
        "mobx-react-devtools": "^4.2.6",
        "react": "^15.3.1",
        "react-dom": "^15.3.1",
        "bootstrap": "^3.3.7" 
    }

webpack config:

var path = require("path");
var webpack = require("webpack");

module.exports = {
    devtool: "source-map",
    entry: {
        main: ["./Scripts/app.tsx"]
    },
    output: {
        path: __dirname + "/wwwroot/dist",
        filename: "bundle.js",
        publicPath: "/dist"
    },
    resolve: {
        extensions: ["", ".js", ".ts", ".tsx"]
    },
    module: {
        loaders: [
            {
                test: /\.ts(x?)$/,
                include: path.join(__dirname, "Scripts"),
                loader: "babel-loader"
            },
            {
                test: /\.tsx?$/,
                loaders: ["awesome-typescript-loader"],
                include: path.join(__dirname, "Scripts")
            },
            {
                test: /\.css$/,
                loaders: ["style-loader", "css-loader", "resolve-url-loader"]
            }, {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader?sourceMap"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|gif|jpg)(\?.+)?$/,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
    ]
};

Configure method of Startup.cs:

if (env.IsDevelopment())
{
	app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
	{
		HotModuleReplacement = true,
		ReactHotModuleReplacement = true
	});

	app.UseDeveloperExceptionPage();
}
else
{
	app.UseExceptionHandler("/Home/Error");
}

app.UseStaticFiles();

app.UseSession();
app.UseIdentity();
app.UseMvc();

app.UseMvc(routes =>
{
	routes.MapRoute(
		name: "default",
		template: "{controller=Home}/{action=Index}/{id?}");

	routes.MapSpaFallbackRoute(
		name: "spa-fallback",
		defaults: new { controller = "Home", action = "Index" });
});

[SteveSandersonMS]

Notice this URL in your error log: http://localhost:10831/dist75ccdc1c7fe918abfd64.hot-update.json. So it looks like you need a trailing slash on the publicPath in your Webpack config.

I can see that the documentation is at fault here, because it doesn't include the trailing slash. Sorry for the inconvenience. I'm updating the docs now.

Thanks for reporting this!