webpack 4 aspnetcore 2.2 HMR not reloading in browser

I'm unable to rule out a compatibility issue with aspnetcore 2.2 and webpack 4 or a configuration issue on my end.

I need some help spotting the configuration issue if that is the cause.

• ASPNETCORE 2.2
• WEBPACK 4

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 HMR connected message in the browser console).

Visual Studio output:

Microsoft.AspNetCore.NodeServices:Information: webpack building... Microsoft.AspNetCore.NodeServices:Information: Checking started in a separate process...

754ms Microsoft.AspNetCore.NodeServices:Information: webpack built 1e45bf5f88ad514f4a12 in 4940ms

Compiled successfully. starting HTTP/1.1 GET https://localhost:44331/__webpack_hmr

webpack.config.js:

const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const webpack = require('webpack');

module.exports = (env) => {
const isDevBuild = !(env && env.prod);

const outputDir = (env && 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()       
    ]
}];

};

Startup.cs Configure:

 if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true                 
            });
        }

package.json:

"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"

EDIT: (adding boot.tsx and app.tsx to show hot module loading)

boot.tsx

   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(
    <App />,
    document.getElementById('react-app')
       ); 
   }

   runWithAdal(authContext, () => {  
       renderApp();
   }, DO_NOT_LOGIN);

app.tsx

   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 = () => <Provider store={store}>

;

   export default hot(module)(App);