I'm trying to use ASP.NET Core 2 with Webpack 4 and React and I would love hot reloading. Problem is; when I try to make a change to one of the files it comes back with this error in Chrome:
:8100/dist/__webpack_hmr Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING.
My package.json:
{
"name": "ui",
"private": true,
"version": "0.1.0",
"license": "UNLICENSED",
"description": "Application",
"devDependencies": {
"@types/history": "4.6.0",
"@types/jquery": "3.3.1",
"@types/jsonwebtoken": "^7.2.6",
"@types/lodash": "4.14.105",
"@types/moment": "2.13.0",
"@types/query-string": "^5.1.0",
"@types/react": "^16.0.40",
"@types/react-dates": "16.0.5",
"@types/react-dom": "^15.5.1",
"@types/react-redux": "^4.4.45",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/react-router-redux": "5.0.3",
"@types/webpack": "2.2.15",
"@types/webpack-env": "1.13.0",
"airbnb-prop-types": "2.8.1",
"aspnet-prerendering": "3.0.1",
"aspnet-webpack": "2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "4.0.0",
"css-loader": "^0.28.11",
"domain-task": "3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "1.1.11",
"glob": "^7.1.2",
"history": "4.6.3",
"install": "0.10.4",
"jquery": "3.2.1",
"jquery-mask-plugin": "1.14.15",
"jsonwebtoken": "^8.2.0",
"lodash": "4.17.5",
"moment": "2.21.0",
"muicss": "0.9.38",
"myriad-font": "0.0.2",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"numbro": "2.0.5",
"path": "0.12.7",
"popper.js": "1.14.1",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "2.1.1",
"prop-types": "15.6.1",
"query-string": "^6.0.0",
"react": "^16.2.0",
"react-addons-css-transition-group": "15.6.2",
"react-cookie": "^2.1.4",
"react-dom": "^16.2.0",
"react-moment": "0.7.0",
"react-moment-proptypes": "1.5.0",
"react-redux": "^5.0.7",
"react-router-dom": "4.1.1",
"react-router-redux": "^5.0.0-alpha.9",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"rxjs": "5.5.7",
"sass-loader": "^6.0.7",
"sfcookies": "^1.0.2",
"source-map-loader": "0.2.3",
"style-loader": "^0.18.2",
"tslint": "^5.9.1",
"tslint-react": "^3.5.1",
"typescript": "^2.7.2",
"url-loader": "1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "4.1.2"
},
"scripts": {
"compile-vendor": "webpack --config webpack.config.vendor.js",
"compile-client": "webpack --config webpack.config.js"
},
"dependencies": {
"@types/react-hot-loader": "^3.0.6",
"react-hot-loader": "^3.1.1"
}
}
And my webpack.config.js:
"use strict";
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
// Configuration in common to both client-side and server-side bundles
const sharedConfig = () => ({
mode: !(env && env.prod) ? 'development' : 'production',
stats: { modules: false },
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{
test: /\.tsx?$/,
include: /ClientApp/,
use: 'awesome-typescript-loader?silent=false'
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: "file-loader",
options: {
limit: 50000,
name: "./img/[name].[ext]"
}
},
{
// Match woff2 in addition to patterns like .woff?v=1.1.1.
test: /\.(woff|woff2|ttf)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
limit: 50000,
name: "./fonts/[name].[ext]"
}
}
]
},
performance: {
hints: false
},
devtool: 'cheap-module-source-map',
plugins: [new CheckerPlugin()]
});
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: {
"main-client": ['./ClientApp/boot-client.tsx'].concat(glob.sync('./ClientApp/img/**/*.svg'))
},
module: {
rules: [
{
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
]
}),
exclude: /node_modules/
}
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin("site.css"),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new webpack.NamedModulesPlugin()
]
});
return [clientBundleConfig];
};