Webpack Hot Reload Middleware Errors

Question

I have a very barebones express/webpack setup and followed the instructions to use webpack-hot-middleware, however, whenever I run my server I get a chain of warnings and error messages referencing node_modules that I'm not aware are needed for this to work with the common end line of the errors being a reference to @./app @multi node ./app.jscould this have something to do with the multi-entry setup in my config.js rather than missing modules?

Error example:

WARNING in ./node_modules/terser-webpack-plugin/dist/worker.js 12:130-137
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./app.js
 @ multi node ./app.js
 ｢wdm｣: Failed to compile.

Here is my config.json running on node v10.16.0 & npm 6.9.0

{
  "name": "express-react-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.4",
    "express": "^4.17.1",
    "morgan": "^1.9.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-dev-server": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0"
  }
}

My webpack.config.js:

var webpack = require('webpack');

module.exports = {
    //Entry
    context: __dirname,
    entry: {
        app: [
            "webpack-hot-middleware/client",
            "./app.js"
        ]
    },
    mode: 'development',
    //Output
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    //Loaders
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, use: "babel-loader" },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

and app.js

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

var app = express();
var port = 3000;

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

console.log(process.env.NODE_ENV)
app.get('/', function(req, res){
    res.send('Test')
})

//Enable "webpack-dev-middleware"
app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
}));

//Enable "webpack-hot-middleware"
app.use(webpackHotMiddleware(compiler));

app.listen(port, () => {
    console.log('Server started on port:' + port);
});


module.exports = app;

List of missing node_modules, but I don't believe this is the issue:

aws-sdk, child_process, fs pointing to various node_module folders that were most likely installed via specific packages

Answer 1

After reading through github issues with related problems, I discovered a fix by adding target: node to tell webpack that this is running in a nodejs environment and to avoid building built-in node modules and then adding the module webpack-node-externals which tells webpack to avoid all external node modules. Not sure this should be required to run the middleware, but it works for me!