Javascriptservices: HMR not reloading changes

Created on 15 Mar 2017  路  3Comments  路  Source: aspnet/JavaScriptServices

Hi, Team.

Like #757 , I've been experiencing the same error. I'm using Vue.js + ASP.NET Core. Without ASP.NET Core, HMR works just fine. However, when I implement ASP.NET Core using this Microsoft.AspNetCore.SpaServices package, it shows the error.

Here's my screenshot (never mind the last two GET method errors, by the way):

image

You can reproduce the same error using these code samples:

  1. https://github.com/devkimchi/Vue.js-with-ASP.NET-Core-Sample/tree/master/src/VueJsAspNetCoreSample
  2. https://github.com/devkimchi/Vue.js-with-ASP.NET-Core-Sample/tree/master/src/VueJsSample

When you run the second sample code, only using VueJs, the HMR works just fine, while the first one, using VueJs on ASP.NET Core, it shows the error like the screenshot above.

Most helpful comment

If you want to use the UseWebpackDevMiddleware helper with HotModuleReplacement, then don't put anything about HMR in your Webpack config, because the helper code adds that dynamically. For example, don't put webpack.HotModuleReplacementPlugin() in your config. There may be other issues breaking things in your example too, but I'm not sure what because there's a lot of code there.

Docs about setting up HMR are in here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/README.md#webpack-dev-middleware.

Or, for a simple working example, please see the projects generated by dotnet new vue:

  1. Run dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
  2. In an empty directory, run dotnet new vue
  3. Run dotnet restore, npm install. Also run set ASPNETCORE_ENVIRONMENT=Development (on Windows) or export ASPNETCORE_ENVIRONMENT=Development (on macOS/Linux)
  4. Finally, run dotnet run to start the app

Alternatively, if you have Visual Studio on Windows, you can skip steps 3 and 4 - just open the generated project in VS and run it.

All 3 comments

If you want to use the UseWebpackDevMiddleware helper with HotModuleReplacement, then don't put anything about HMR in your Webpack config, because the helper code adds that dynamically. For example, don't put webpack.HotModuleReplacementPlugin() in your config. There may be other issues breaking things in your example too, but I'm not sure what because there's a lot of code there.

Docs about setting up HMR are in here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/README.md#webpack-dev-middleware.

Or, for a simple working example, please see the projects generated by dotnet new vue:

  1. Run dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
  2. In an empty directory, run dotnet new vue
  3. Run dotnet restore, npm install. Also run set ASPNETCORE_ENVIRONMENT=Development (on Windows) or export ASPNETCORE_ENVIRONMENT=Development (on macOS/Linux)
  4. Finally, run dotnet run to start the app

Alternatively, if you have Visual Studio on Windows, you can skip steps 3 and 4 - just open the generated project in VS and run it.

@SteveSandersonMS Oh, Thanks. Last time I checked the repository (a couple of weeks ago), Vue template didn't exist! I'll have a careful look into it.

@SteveSandersonMS Commenting out webpack.HotModuleReplacementPlugin() works fine to me. Thanks for this heads up!

Was this page helpful?
0 / 5 - 0 ratings