HMR gets 404 on each reload attempt #1180

New Issue

fergalmoran · 2025-08-09T17:19:10Z

fergalmoran commented

2025-08-09 17:19:10 +00:00

Originally created by @aplex on 12/16/2016

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" });
});

*Originally created by @aplex on 12/16/2016* I've configured the hot reloading for rect/typescript/webpack app as described in the [article](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices). 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" }); }); ```

fergalmoran closed this issue

2025-08-09 17:19:10 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1180