title: webpack 4 aspnetcore 2.2 HMR not reloading in browser
body: <p>I'm unable to rule out a compatibility issue with aspnetcore 2.2 and webpack 4 or a configuration issue on my end.</p>
  
  <p>I need some help spotting the configuration issue if that is the cause.</p>
  
  <ul>
  <li>ASPNETCORE 2.2  </li>
  <li>WEBPACK 4</li>
  </ul>
  
  <p>When I make a change to a ".tsx" file, Visual Studio outputs that webpack has rebuilt, however the browser is not refreshing and there are no messages in the console. (I do however get the initial <strong>HMR connected</strong> message in the browser console).</p>
  
  <p><strong>Visual Studio output</strong>:</p>
  
  <blockquote>
    <p>Microsoft.AspNetCore.NodeServices:Information: webpack building...
    Microsoft.AspNetCore.NodeServices:Information: Checking
    started in a separate process...</p>
    
    <p>754ms Microsoft.AspNetCore.NodeServices:Information: webpack built
    1e45bf5f88ad514f4a12 in 4940ms</p>
    
    <p>Compiled successfully. 
    starting HTTP/1.1 GET <a href="https://localhost:44331/__webpack_hmr" rel="nofollow noreferrer">https://localhost:44331/__webpack_hmr</a></p>
  </blockquote>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>const path = require('path');
  const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  const CleanWebpackPlugin = require('clean-webpack-plugin'); 
  const webpack = require('webpack');
  
  module.exports = (env) =&gt; {
  const isDevBuild = !(env &amp;&amp; env.prod);
  
  const outputDir = (env &amp;&amp; env.publishDir)
      ? env.publishDir
      : __dirname;
  
  return [{
      mode: isDevBuild ? 'development' : 'production',
  
      devtool: 'inline-source-map',
  
      stats: { modules: false },
  
      entry: { 'main': './client/boot.tsx' },
  
      watchOptions: {
          ignored: /node_modules/
      },
  
      output: {
          filename: "dist/[name].js",
          path: path.join(outputDir, 'wwwroot'),
          publicPath: '/'
      },
  
      resolve: {   
          extensions: [".ts", ".tsx", ".js", ".json"]
      },
  
      devServer: {
          hot: true
      },
  
      module: {
          rules: [
              // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
              {
                  test: /\.tsx?$/,
                  include: /client/,
                  loader: [
                      {
                          loader: 'awesome-typescript-loader',
                          options: {
                              useCache: true,
                              useBabel: true,
                              babelOptions: {
                                  babelrc: false,
                                  plugins: ['react-hot-loader/babel'],
                              }
                          }
                      }
                  ]
              },
              { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
          ]
      },
  
      plugins: [             
          new CleanWebpackPlugin(path.join(outputDir, 'wwwroot', 'dist')),
          new CheckerPlugin()       
      ]
  }];
  </code></pre>
  
  <p>};</p>
  
  <p><strong>Startup.cs Configure:</strong></p>
  
  <pre><code> if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
              app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
              {
                  HotModuleReplacement = true                 
              });
          }
  </code></pre>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>"devDependencies": {
  "@babel/core": "*",
  "@babel/preset-env": "*",
  "@types/history": "4.6.0",
  "@types/jest": "^23.3.2",
  "@types/node": "^10.9.1",
  "@types/react": "^16.7.13",
  "@types/react-dom": "16.0.11",
  "@types/react-hot-loader": "3.0.3",
  "@types/react-router": "4.4.1",
  "@types/react-router-dom": "4.3.1",
  "@types/webpack-env": "^1.13.6",
  "aspnet-webpack": "^3.0.0",
  "awesome-typescript-loader": "^5.2.0",
  "babel-core": "7.0.0-bridge.0",
  "babel-jest": "*",
  "clean-webpack-plugin": "^0.1.19",
  "crypto-js": "^3.1.9-1",
  "css-loader": "0.28.4",
  "enzyme-to-json": "^3.3.4",
  "event-source-polyfill": "0.0.9",
  "extract-text-webpack-plugin": "2.1.2",
  "file-loader": "0.11.2",
  "file-saver": "^1.3.8",
  "isomorphic-fetch": "2.2.1",
  "jest": "^23.6.0",
  "jquery": "^3.2.1",
  "json-loader": "0.5.4",
  "moment": "^2.22.2",
  "raf": "^3.4.0",
  "react": "^16.6.3",
  "react-deep-force-update": "2.1.1",
  "react-dom": "^16.6.3",
  "react-hot-loader": "^4.0.0",
  "react-router-dom": "4.1.1",
  "react-select": "^2.0.0",
  "style-loader": "0.18.2",
  "ts-jest": "^23.10.3",
  "ts-loader": "^2.0.1",
  "typescript": "^2.9.2",
  "url-loader": "0.5.9",
  "webpack": "^4.15.1",
  "webpack-cli": "^3.0.8",
  "webpack-dev-middleware": "^3.1.3",
  "webpack-hot-middleware": "^2.22.2"
  </code></pre>
  
  <p><strong>EDIT:</strong> (adding boot.tsx and app.tsx to show hot module loading)</p>
  
  <p><strong>boot.tsx</strong></p>
  
  <pre><code>   import * as React from 'react';
     import { runWithAdal } from 'react-adal';
     import * as ReactDOM from 'react-dom';
     import App from './app';
     import { authContext } from './authentication/azure/azureConfig';
  
     const DO_NOT_LOGIN = false;
  
     function renderApp() {   
  
         ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById('react-app')
         ); 
     }
  
     runWithAdal(authContext, () =&gt; {  
         renderApp();
     }, DO_NOT_LOGIN);
  </code></pre>
  
  <p><strong>app.tsx</strong></p>
  
  <pre><code>   import * as React from 'react';
     import { hot } from 'react-hot-loader';
     import { Provider } from 'react-redux';
     import * as RoutesModule from './routes';
     import { BrowserRouter } from 'react-router-dom';
     import configureStore from './store/configureStore';
  
     let routes = RoutesModule.routes;
  
     const store = configureStore({});
  
     const baseUrl = 
     document.getElementsByTagName('base')[0].getAttribute('href')!;
  
     const App: React.SFC = () =&gt; &lt;Provider store={store}&gt;
  </code></pre>
  
  <p>;</p>
  
  <pre><code>   export default hot(module)(App);
  </code></pre>