React template: CSS Modules HMR not working

[novascreen]

As soon as i add ?modules to the css-loader I get the following message after a CSS change:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR]  - ./~/css-loader?modules!./ClientApp/css/site.css

I couldn't find anything that i'm missing to make that work. As far as I understand this should work. I also looked for an option to pass reload=true to webpack-hot-middleware/client, but nothing seems to be exposed for that.

[SteveSandersonMS]

This has been reported a few times both to the css-loader and webpack-dev-server projects, e.g., https://github.com/webpack-contrib/css-loader/issues/186. It's an aspect of how css-loader is designed, rather than something controlled in this repo.

You're right that we don't currently expose a way to pass reload=true to the HMR client endpoint. That would be a good thing to add. Would you be interested in submitting a PR that extends WebpackDevMiddlewareOptions with some new options (e.g., ClientOptions of type IDictionary<string, string>), and correspondingly update aspnet-webpack so it adds any supplied option values to the client endpoint URL?

I'll close this as currently working as expected, but please feel free to post here further if you want to discuss submitting such a PR.

[novascreen]

@SteveSandersonMS I'd be interested in giving this a try and think I've made out the spots to do the changes: src\Microsoft.AspNetCore.SpaServices\Webpack\WebpackDevMiddlewareOptions.cs, src\Microsoft.AspNetCore.SpaServices\npm\aspnet-webpack\src\WebpackDevMiddleware.ts and add some docs to src\Microsoft.AspNetCore.SpaServices\README.md I'm running into some trouble though when I try to npm link aspnet-webpack into one of the React templates. Firstly the templates seem to be missing some step to run a webpack build before the first dotnet run. I fixed that by adding some scripts to packages.json to simplify this for myself (not intending to push that as part of a PR, but maybe something to consider?):

  "scripts": {
    "dev": "cross-env ASPNETCORE_ENVIRONMENT=Development dotnet run",
    "build": "webpack --config webpack.config.vendor.js && webpack"
  },

But then I'm running into some errors. When I don't install the node modules in the linked module I get lots of type errors from at-loader mostly about duplicates in @types\whatwg-fetch and typescript. When I do install the nodules modules there I get a different error.

What is your workflow for testing changes to the npm packages?

[SteveSandersonMS]

aspnet-webpack already has a prepublish script in its package.json that should run whenever you invoke npm link. If that doesn't happen, something is wrong with your dev environment. So it should not be necessary to add the extra scripts that you did.

When you use npm link, you don't get the choice of whether to install dependent packages or not. npm link does that for you. Again, if this isn't happening for you, something is wrong either with your dev environment, or the way you're using npm link.

I get lots of type errors from at-loader mostly about duplicates in @types\whatwg-fetch and typescript

That's a separate issue caused by a breaking change in TypeScript 2.2.1. We just implemented a fix for that in #705.