asp.net react webpack 4 Hmr failing with 500 response - reactjs

Question

After updating to webpack 4.19 Hmr stoped working and throws an error everythime I change something in a code.
project setup:
asp.net core 2.0
react
Web-pack
Recently I've updated from Webpack 2.5 to 4.19 as this kinda big update, I might be missing some configuration, after googling I came here to ask for help.
If I am missing anything, please just ask, I will provide any additional info.
Error I review after updating code:
Project folders/files structure
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
mode: isDevBuild ? "development" : "production",
entry: {
'main': './ClientApp/boot.tsx',
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: 'main.js',
publicPath: isDevBuild ? 'dist/' : ""
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [{
test: /\.tsx?$/,
include: /ClientApp/,
use: 'awesome-typescript-loader?silent=true'
},
{
test: /\.js$/,
include: /ClientApp/,
use: 'source-map-loader',
enforce: 'pre'
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff2|eot|woff|ttf)$/,
use: 'url-loader?limit=25000'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
]
},
optimization: isDevBuild ? {} : {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat([
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
]),
externals: {
Config: JSON.stringify(isDevBuild ? require('./appsettings.Development.json') : require('./appsettings.json'))
}
}];
};
webpack.config.vendor.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
mode: isDevBuild ? "development" : "production",
stats: {
modules: false
},
resolve: {
extensions: ['.js']
},
module: {
rules: [{
test: /\.(png|jpg|jpeg|gif|svg|woff2|eot|woff|ttf)$/,
use: 'url-loader?limit=25000'
},
{
test: /\.css(\?|$)/,
use: [MiniCssExtractPlugin.loader, 'css-loader?minimize']
},
]
},
optimization: isDevBuild ? {} : {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
entry: {
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery'],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
new MiniCssExtractPlugin({
filename: "vendor.css",
chunkFilename: "vendor.css"
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
})
]
}];
};
package.json
{
"name": "name",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/enzyme": "^3.1.9",
"#types/history": "4.6.0",
"#types/jest": "^22.2.0",
"#types/react": "^16.4.14",
"#types/react-dom": "^16.0.7",
"#types/react-hot-loader": "^4.1.0",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "^1.13.6",
"aspnet-webpack": "^3.0.0",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-15": "^1.0.5",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"isomorphic-fetch": "2.2.1",
"jest": "^22.4.2",
"jest-mock-axios": "^1.0.21",
"jquery": "3.2.1",
"json-loader": "^0.5.4",
"mini-css-extract-plugin": "^0.4.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-hot-loader": "^3.1.3",
"react-router-dom": "4.1.1",
"react-test-renderer": "^15.6.2",
"react-transition-group": "^2.2.1",
"style-loader": "^0.18.2",
"typescript": "^3.0.3",
"url-loader": "^0.5.9",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.3.0",
"webpack-hot-middleware": "^2.24.1"
},
"dependencies": {
"#types/chart.js": "^2.7.25",
"#types/node": "^10.10.3",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.2",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"linq": "^3.1.0",
"moment": "^2.22.2",
"primeicons": "^1.0.0-beta.9",
"primereact": "^1.6.2",
"tslint": "^5.9.1",
"tslint-react": "^3.4.0",
"uglifyjs-webpack-plugin": "^2.0.1"
},
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"build": "./node_modules/.bin/webpack",
"tslint": "tslint -p tsconfig.json",
"debug": "node --debug-brk --inspect ./node_modules/jest/bin/jest -i"
},
"jest": {
"setupFiles": [
"<rootDir>/test-shim.js",
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(ts|tsx)$": "<rootDir>/test-preprocessor.js"
},
"testMatch": [
"**/__tests__/*.(ts|tsx|js)"
]
}
}
entry class - boot.tsx
// tslint:disable-next-line:no-var-requires
require("react-hot-loader/patch");
import "./css/site.css";
import "bootstrap";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";
import "babel-polyfill";
import { BrowserRouter } from "react-router-dom";
import * as RoutesModule from "./routes";
import
{ AppConfig } from "./appconfig";
import axios, { AxiosRequestConfig } from "axios";
// Import PrimeReact required files and selected theme
import "primereact/resources/primereact.min.css";
import "font-awesome/css/font-awesome.css";
import "primeicons/primeicons.css";
import "primereact/resources/themes/ludvig/theme.css";
import "./css/custom.css";
let routes = RoutesModule.routes;
axios.defaults.headers.common.Authorization = "Basic " + window.btoa(AppConfig.testUser + ":" + AppConfig.testPassword);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing
// configuration and injects the app into a DOM element.
const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;
ReactDOM.render(
<AppContainer>
<BrowserRouter children={routes} basename={baseUrl} />
</AppContainer>,
document.getElementById("react-app"),
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept("./routes", () => {
routes = require<typeof RoutesModule>("./routes").routes;
renderApp();
});
}
Startup.cs
namespace name
{
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.Webpack;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
//ReactHotModuleReplacement = true,
//HotModuleReplacementEndpoint = "/__webpack_hmr"
});
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
}
}
}

Answer 1

Solved. !
By simply adding babel-loader with all additional dependencies and updating webpack.config.js with
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
babelrc: false,
presets: [
[
"#babel/preset-env",
{
targets: {
browsers: "last 2 versions"
}
}
],
"#babel/preset-typescript",
"#babel/preset-react"
],
plugins: [
["#babel/plugin-proposal-decorators", {
legacy: true
}],
["#babel/plugin-proposal-class-properties", {
loose: true
}],
"react-hot-loader/babel"
]
}
}
},