Consider adding option to disable HMR error overlay

[antmdvs]

I've added some 3rd party packages that are causing TypeScript compilation errors. As such, the HMR overlay is popping up on every HMR bundle injection. I tried moving those packages to the vendor output bundle (thinking this would prevent them from being recompiled every time I saved one of my own files -- isn't that the point of the vendor bundle???) but the overlay is still displayed every time I save.

Is there a way to suppress the HMR overlay until the 3rd party deps get fixed. The below link describes how to do it but I'm not sure how to translate it into this project (does the HMR config code live in aspnet-webpack-react?)

https://github.com/glenjamin/webpack-hot-middleware#config

• overlay - Set to falseto disable the DOM-based client-side overlay.

[SteveSandersonMS]

thinking this would prevent them from being recompiled every time I saved one of my own files

Yes, that is what happens. But if your compiled vendor bundle contains errors, they are still going to show up each time it's loaded.

Is there a way to suppress the HMR overlay until the 3rd party deps get fixed.

Done. I've just published aspnet-webpack version 1.0.17, so upgrade to that. Then you can optionally specify your webpack-hot-middleware/client options manually in webpack.config.js. For example, change your entry config value to this:

entry: { 'main-client': ['webpack-hot-middleware/client?overlay=false', './ClientApp/boot-client.ts'] },

... and then you won't get the overlay. You probably only want to do this in development builds (because you don't want HMR in production) so you might want to wrap that part of your config in an if(isDevBuild) { ... } test or similar.

[antmdvs]

Done. I've just published aspnet-webpack version 1.0.17

Wow, you are quick! Did you already have that one in your back pocket? :)

I'll give it a shot. Thanks, Steve

[antmdvs]

Well, it does suppress the overlay, but it still doesn't hot reload my own stuff.

Steps to repro:

1. yo aspnetcore-spa (ReactRedux)
2. In webpack.config.js, replace line 26 with: entry: { 'main-client': ['webpack-hot-middleware/client?overlay=false', './ClientApp/boot-client.tsx'] },
3. npm install apollo-client --save
4. In webpack.config.vendor.js, add 'apollo-client' to the end of the 'vendor' array on line 18.
5. Rebundle vendor module: webpack --config webpack.config.vendor.js
6. In boot-client.tsx, add import ApolloClient from 'apollo-client';
7. Press F5 to run the project from Visual Studio
8. Navigate to /counter
9. Verify "[HMR] Connected" in Chrome DevTools
10. In Counter.tsx, change something and save to initiate HMR

Note that the errors appear in the console (happy), the overlay is suppressed (happy), but the new Counter code doesn't update (sad).

[SteveSandersonMS]

Sounds like HMR is running but has some incompatibility with apollo-client, or maybe Webpack's HMR code is hard-coded not to apply updates if it saw there was an error. I'm afraid this is something you'll have to take up with the apollo-client or Webpack folks :(