How to implement hot-reloading in Django+React+Webpack app - django

Question

I'm developing an app with Django and React Js, I want to deploy on it hot reloading, after searching I realized that the best integration with Django and Webpack is django-webpack-loader so I added it to my project. This is the setup of my project.
This is the server.js file:
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config");
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline: true,
progress: true,
historyApiFallback: true,
headers: {"Access-Control-Allow-Origin": "*"}
}).listen(3000, "0.0.0.0", function(err, result) {
if (err) {
console.log(err);
}
console.log("Listening at 0.0.0.0:3000");
});
webpack.config.js:
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const BundleTracker = require("webpack-bundle-tracker");
var config = {
resolve: {
alias: {
common: path.resolve("./common/components"),
utils: path.resolve("./common/utils_js")
},
modules: [path.resolve("./node_modules")]
},
entry: {
bundle: [
require.resolve("webpack-dev-server/client") + "?http://localhost:3000",
require.resolve("webpack/hot/dev-server"),
"react",
"react-dom",
"react-bootstrap",
"react-router-dom",
"react-infinite-scroller",
"react-select",
"react-autocomplete",
"jquery",
"jquery-ui",
.......[more more]
],
"bundle.css": "./common/assets/less/bundle.less",
.......[more more]
},
output: {
path: path.resolve("./static/"),
filename: "[name]",
publicPath: "http://localhost:3000/static/"
},
plugins: [
new BundleTracker({filename: "./static/webpack-stats.json"}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.CommonsChunkPlugin({
name: "bundle",
filename: "bundle.js"
}),
new ExtractTextPlugin("[name]")
],
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"]
})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
},
{
test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader?name=[name].[ext]"
},
{
test: /\.(wav|mp3|jpg|png|gif|ico)$/,
loader: "file-loader?name=[name].[ext]"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["env"],
plugins: ["transform-object-rest-spread"]
}
},
{
test: /\.jsx$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["env", "react"],
plugins: ["transform-object-rest-spread"]
}
}
]
}
};
module.exports = config;
package.json:
{
"name": "test",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"create-react-class": "^15.6.3",
"css-loader": "^1.0.0",
"diff-match-patch": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"fullcalendar": "^3.8.0",
"fullcalendar-scheduler": "^1.9.4",
"jquery": "^3.2.1",
"jquery-textcomplete": "^1.8.4",
"jquery-ui": "^1.12.1",
"jquery-ui-bootstrap": "^1.0.0",
"less": "^3.0.4",
"less-loader": "^4.0.5",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"pdfjs-dist": "^2.0.489",
"prop-types": "^15.6.0",
"react": "^16.4.1",
"react-autocomplete": "^1.7.2",
"react-bootstrap": "^0.32.0",
"react-dom": "^16.4.1",
"react-draggable": "^3.0.4",
"react-dropzone": "^5.0.1",
"react-google-recaptcha": "^1.0.0",
"react-infinite-scroller": "^1.1.2",
"react-number-format": "^3.5.1",
"react-router-dom": "^4.2.2",
"react-scrollbar": "^0.5.1",
"react-select": "^1.2.0",
"react-slider": "^0.11.2",
"react-sortable-hoc": "^0.8.3",
"react-textarea-autosize": "^7.0.4",
"showdown": "^1.8.6",
"style-loader": "^0.22.1",
"url-loader": "^1.0.1",
"webpack": "^3.10.0",
"webpack-bundle-tracker": "^0.3.0",
"webpack-dev-server": "2.11.3"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^5.4.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-react": "^7.6.1",
"prettier-eslint": "^8.8.1"
},
"scripts": {
"dev": "webpack -d --watch --progress",
"build:dev": "webpack -d --progress",
"build:prod": "webpack -p --progress"
}
}
When I run the Command node server.js gives me no error then when I enter the app gives me the following error that I show in the image error console