HMR not working when using nodemon

Question

I have an app that is using express to serve some API calls and webpack to server some static assets in development. All works ok until I bring nodemon into the setup. When I run my app using nodemon I get this error when I update a file on the React side (client side).

GET http://localhost:3004/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

If I run my app without nodemon the HMR works perfect and all updates and reloads the React modules.

In my package.json file I have the following scripts. The start one works fine but the dev one using nodemon causes the error when a change is made to a React component.

  "scripts": {
    "start": "node server/app.js",
    "dev": "nodemon server/app.js",
    "build": "cross-env NODE_ENV=production webpack --config ./webpack/webpack.prod.config.js --progress --colors",
    "heroku-postbuild": "npm run build"
  },

Any ideas what might be causing this?

Here is my entry point in my webpack config file.

  entry: [
    `${ROOT_DIR}/js/index`,
    'webpack-hot-middleware/client'
  ]

Here is my webpack setup with webpackHotMiddleware which I call in my app.js and pass in App to it. App being my express server.

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('../../webpack/webpack.dev.config.js');
const compiler = webpack(webpackConfig);

const devOptions = {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    stats: { colors: true },
    historyApiFallback: true
}
// WEBPACK MIDDLEEWARE
function setupWebpackMiddleware( app ){
  app.use(webpackHotMiddleware(compiler));
  app.use(webpackDevMiddleware(compiler, devOptions));
}

module.exports = {setupWebpackMiddleware}

Using the following versions.

     "webpack": "^2.2.1"
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "~1.16.2",
    "webpack-hot-middleware": "^2.16.1"