Webpack HMR only does not connect, exception after request timeout #299

New Issue

fergalmoran · 2025-08-09T17:15:45Z

fergalmoran commented

2025-08-09 17:15:45 +00:00

Originally created by @CarbonAtom on 12/2/2017

I am currently only attempting to setup basic HMR dev environment for a new project. the HMR endpoint hangs and eventually times out and I never receive '[HMR] connected'. After timing out, the server throws:

fail: Microsoft.AspNetCore.Server.Kestrel[13] Connection id "0HL9PJM0SHE0A", Request id "0HL9PJM0SHE0A:00000003": An unhandled exception was thrown by the application. System.Threading.Tasks.TaskCanceledException: A task was canceled.

I can add full stack trace from the log if needed.

Win10
Node 8.1.3
NPM 5.4.0

package.json:

"devDependencies": {
    "aspnet-webpack": "^2.0.1",
    "css-loader": "^0.28.7",
    "event-source-polyfill": "^0.0.12",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.2.0",
    "typescript": "^2.6.2",
    "webpack": "^3.9.1",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.
}

webpack.config:

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const dev = require('./webpack.config.dev');
const prod = require('./webpack.config.prod');

const isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = env => {
    let isDev = isDevelopment;
    if (typeof (env) !== 'undefined') isDev = !env.prod;
    const output = merge.multiple({
        script: {
            name: 'script',
            entry: {
                'main': ['./ClientApp/scripts/index.ts'],
            },
            resolve: {
                extensions: ['.js', '.ts']
            },
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        use: [
                            {
                                loader: 'ts-loader',
                                options: {
                                    silent: true,
                                },
                            },
                        ],
                    },
                ],
            },
        },
        style: {
            name: 'style',
            entry: {
                'site': ['./ClientApp/styles/site.scss'],
            },
            module: {
                rules: [
                    {
                        test: /\.scss$/,
                        use: [
                            {
                                loader: 'style-loader',
                            }, {
                                loader: 'css-loader',
                            }, {
                                loader: 'sass-loader',
                            },
                        ],
                    },
                ],
            },
        },
    }, isDev ? dev : prod);
    console.log(JSON.stringify(output, null, 2));
    return output;
};

module.exports = {
    script: {
        name: 'script',
        output: {
            path: path.resolve(__dirname, './ClientApp/_wwwroot/js'),
            filename: '[name].js',
            publicPath: '/js/',
        },
        devtool: 'cheap-module-eval-source-map',
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
        ],
    },
    style: {
        name: 'style',
        output: {
            path: path.resolve(__dirname, './ClientApp/_wwwroot/css'),
            filename: '[name].css.js',
            publicPath: '/css/',
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
        ],
    },
};

and startup:

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }
        app.UseStaticFiles();
        if (env.IsDevelopment())
        {
            var staticSets = new Dictionary<string, string>
                             {
                                 {"node_modules", "/node_modules"},
                                 {"ClientApp\\_wwwroot", ""}
                             };
            foreach (var kvp in staticSets)
            {
                app.UseStaticFiles(new StaticFileOptions
                                   {
                                       FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), kvp.Key)),
                                       RequestPath = new PathString(kvp.Value)
                                   });
            }
        }

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

webpack compiles on save successfully, I just need to refresh to see changes so it appears to be isolated to just the hmr plugin.

Edit: Also, just to note I tested with a very basic webpack.config with only ts-loader, with output to wwwroot/dist/ like in the examples but also a no go, however I am showing the config I desire it to actually be for my dev env.

*Originally created by @CarbonAtom on 12/2/2017* I am currently only attempting to setup basic HMR dev environment for a new project. the HMR endpoint hangs and eventually times out and I never receive '[HMR] connected'. After timing out, the server throws: ` fail: Microsoft.AspNetCore.Server.Kestrel[13] Connection id "0HL9PJM0SHE0A", Request id "0HL9PJM0SHE0A:00000003": An unhandled exception was thrown by the application. System.Threading.Tasks.TaskCanceledException: A task was canceled. ` I can add full stack trace from the log if needed. --- Win10 Node 8.1.3 NPM 5.4.0 package.json: "devDependencies": { "aspnet-webpack": "^2.0.1", "css-loader": "^0.28.7", "event-source-polyfill": "^0.0.12", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "ts-loader": "^3.2.0", "typescript": "^2.6.2", "webpack": "^3.9.1", "webpack-hot-middleware": "^2.21.0", "webpack-merge": "^4.1. } webpack.config: const path = require('path'); const merge = require('webpack-merge'); const webpack = require('webpack'); const dev = require('./webpack.config.dev'); const prod = require('./webpack.config.prod'); const isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; module.exports = env => { let isDev = isDevelopment; if (typeof (env) !== 'undefined') isDev = !env.prod; const output = merge.multiple({ script: { name: 'script', entry: { 'main': ['./ClientApp/scripts/index.ts'], }, resolve: { extensions: ['.js', '.ts'] }, module: { rules: [ { test: /\.ts$/, use: [ { loader: 'ts-loader', options: { silent: true, }, }, ], }, ], }, }, style: { name: 'style', entry: { 'site': ['./ClientApp/styles/site.scss'], }, module: { rules: [ { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, ], }, ], }, }, }, isDev ? dev : prod); console.log(JSON.stringify(output, null, 2)); return output; }; module.exports = { script: { name: 'script', output: { path: path.resolve(__dirname, './ClientApp/_wwwroot/js'), filename: '[name].js', publicPath: '/js/', }, devtool: 'cheap-module-eval-source-map', plugins: [ new webpack.HotModuleReplacementPlugin(), ], }, style: { name: 'style', output: { path: path.resolve(__dirname, './ClientApp/_wwwroot/css'), filename: '[name].css.js', publicPath: '/css/', }, plugins: [ new webpack.HotModuleReplacementPlugin(), ], }, }; and startup: public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); if (env.IsDevelopment()) { var staticSets = new Dictionary<string, string> { {"node_modules", "/node_modules"}, {"ClientApp\\_wwwroot", ""} }; foreach (var kvp in staticSets) { app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), kvp.Key)), RequestPath = new PathString(kvp.Value) }); } } app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } } webpack compiles on save successfully, I just need to refresh to see changes so it appears to be isolated to just the hmr plugin. Edit: Also, just to note I tested with a very basic webpack.config with only ts-loader, with output to wwwroot/dist/ like in the examples but also a no go, however I am showing the config I desire it to actually be for my dev env.

fergalmoran closed this issue

2025-08-09 17:15:45 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#299