Recently, I spent a weekend banging my head against the wall as I tried to figure out how to upgrade a personal project to webpack 4, TypeScript 2.9, and React (used to be AngularJS 1.6). I finally got it all working together – and even got hot module replacement (hmr) working. TL;DR? Checkout the code here: https://github.com/natemcmaster/aspnetcore-webpack-hmr-demo

The important bits:

Use the WebpackDevMiddleware

This middleware in ASP.NET Core is built-in to ASP.NET Core 2.1, but you have to specifically add an option to configure HMR. Add this to your Startup.cs file.

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
    HotModuleReplacement = true
});

See in source

Use babel-core and ES6

HMR was silently failing for a while until I discovered a few knobs in awesomet-typescript-loader. After a bunch of GitHub spelunking, I discovered that I needed these magical settings in webpack.config.js.

// webpack.config.js
{
    test: /\.tsx?$/,
    include: /ClientApp/,
    loader: [
        {
            loader: 'awesome-typescript-loader',
            options: {
                useCache: true,
                useBabel: true,
                babelOptions: {
                    babelrc: false,
                    plugins: ['react-hot-loader/babel'],
                }
            }
        }
    ]
}

Also, you may need to update your tsconfig.json file to target ES6.

{
    "compilerOptions": {
         "target": "es6",
        "module": "commonjs",
        "jsx": "react"
    }
}

See in source

react-hot-loader 4

If you’ve used previous versions, considering upgrading to version 4. It’s usage is super simple now. Here’s a minimal React app with hmr.


import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';

const App: React.SFC = () =>
    <div>
        Hello, hot reloading
    </div>;

const HotApp = hot(module)(App);

ReactDOM.render(<HotApp />, document.getElementById('root'));

A few other goodies

I prefer Yarn to npm because it is faster, deterministic, and it’s not too hard to integrate Yarn with the .NET Core command line. Here are some MSBuild targets you can add to your project to lightup Yarn integration: