Webpack Dev Middleware not working (HMR and React HMR) #565

New Issue

fergalmoran · 2025-08-09T17:16:47Z

fergalmoran commented

2025-08-09 17:16:47 +00:00

Originally created by @jzbyers on 7/19/2017

This issue is very similar to closed issue #422, which unfortunately was unable to solve my problem. In #422, the fix was to update Node, but I already have a stable version of Node more recent than the one listed in #422.

My environment

macOS Sierra v10.12.5
VS Code v1.14.1
Node.js v6.10.0
.NET Core SDK, which contains .NET Core 1.0 and 1.1

Steps to reproduce (some steps copied from the README):

Install Yeoman and these generator templates:

npm install -g yo generator-aspnetcore-spa

Generate your new application starting point:

cd some-empty-directory
yo aspnetcore-spa

This command should fail during the build process, which you can fix by following issues #1120 and #1099. I also referenced these issues in #1132. In summary, you'll probably need to install more recent versions of some npm packages, including typescript and some @types/.

Make sure that your Startup.cs file contains a block of code similar to the following, to make sure HMR will be in place during development mode:

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

Once the generator has run successfully (and if it hasn't, once you've successfully installed stable dependencies), you can start up the app. Before running, though, make sure you're running the app in development mode so that the app will use webpack dev middleware. Start up the app with:

dotnet run

Open a browser (I've been using Chrome) and navigate to the correct localhost port. Open a file in the ClientApp directory, like components/Home.tsx and change something simple. When you save the file, in your terminal you should see something like:

info: Microsoft.AspNetCore.NodeServices[0]
      Node will restart because file changed: /Users/your-username/code/aspnetcore-reactredux/ClientApp/components/Home.tsx

Flip back to the browser and reload the page. For me, the change does not appear, and I don't think Node ever rebuilt the ClientApp code using webpack.

The only way I can get the change to take place is if I run webpack manually from the terminal.

Any thoughts?

*Originally created by @jzbyers on 7/19/2017* This issue is very similar to closed issue #422, which unfortunately was unable to solve my problem. In #422, the fix was to update Node, but I already have a stable version of Node more recent than the one listed in #422. #### My environment macOS Sierra v10.12.5 VS Code v1.14.1 Node.js v6.10.0 .NET Core SDK, which contains .NET Core 1.0 and 1.1 #### Steps to reproduce (some steps copied from the README): Install Yeoman and these generator templates: ``` npm install -g yo generator-aspnetcore-spa ``` Generate your new application starting point: ``` cd some-empty-directory yo aspnetcore-spa ``` This command should fail during the build process, which you can fix by following issues #1120 and #1099. I also referenced these issues in #1132. In summary, you'll probably need to install more recent versions of some npm packages, including `typescript` and some `@types/`. Make sure that your Startup.cs file contains a block of code similar to the following, to make sure HMR will be in place during development mode: ``` app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ReactHotModuleReplacement = true }); ``` Once the generator has run successfully (and if it hasn't, once you've successfully installed stable dependencies), you can start up the app. Before running, though, make sure you're running the app in development mode so that the app will use webpack dev middleware. Start up the app with: ``` dotnet run ``` Open a browser (I've been using Chrome) and navigate to the correct localhost port. Open a file in the ClientApp directory, like components/Home.tsx and change something simple. When you save the file, in your terminal you should see something like: ``` info: Microsoft.AspNetCore.NodeServices[0] Node will restart because file changed: /Users/your-username/code/aspnetcore-reactredux/ClientApp/components/Home.tsx ``` Flip back to the browser and reload the page. For me, the change does not appear, and I don't think Node ever rebuilt the ClientApp code using webpack. The only way I can get the change to take place is if I run webpack manually from the terminal. Any thoughts?

fergalmoran closed this issue

2025-08-09 17:16:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#565