Webpack HMR Throws React syntheticEvent Error

I have an app running effectively in production that I've cloned and am attempting to update in preparation for building out a sequel. However, I've run into a strange Webpack issue by updating it / React / HMR to more recent builds.

The HMR will connect, and Webpack appears to compile just fine. However, interacting with the page (such as clicking) generates the following error:

Obviously, the app is at that point no longer functional as clicking things does not fire off anything. Interestingly, we also get the following 404 error in the Node console and on the browser:

(NOTE: this appears to be a giant query string incl functions, and specifically referencing syntheticEvent. I can print the whole thing for you if you want)

NODE v6.3.1

RELEVANT NPMs:

"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.4",

"webpack": "^2.5.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"

"babel-cli": "^6.11.4",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.1",
"babel-loader": "^7.0.0",
"babel-plugin-array-includes": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.0.0",
"babel-plugin-transform-object-assign": "^6.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.24.1",

WEBPACK.CONFIG.DEV.JS:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var hotMiddlewareScript = 'webpack-hot-middleware/client';

console.log('using the dev config file');
console.log('THE PUBLIC PATH: ' + path.join(__dirname, '/CLIENTSIDE/static'));

module.exports = {
  devtool: 'eval',
  entry: {
    background: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/background')],
    uniqueShare: ['webpack-hot-middleware/client',  path.join(__dirname, '/CLIENTSIDE/components/uniqueShare')],
    starRating: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/starRating')],
    testingPage: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/testingPage')],
    style: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/style')]
  },
  output: {
    path: path.join(__dirname, '/CLIENTSIDE/static'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              cacheDirectory: true,
              presets: ['react', 'es2015', 'stage-1'],
              plugins: ['transform-decorators-legacy', 'transform-object-assign', 'array-includes'],
            },
        },
        {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    }
  };

WHERE WE LOAD UP HMR:

  console.log('****************************** RUNNING IN DEV MODE ******************************');
  var webpack = require('webpack');
  var webpackConfig = require('./webpack.config.dev');
  var compiler = webpack(webpackConfig);

  console.log('Looking for the HMR here: ' + webpackConfig.output.publicPath);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
  }));

  app.use(require('webpack-hot-middleware')(compiler));

Now, here's the strange part. Babel / Webpack compile everything just fine in production mode, without the hot reloader. The app runs perfectly fine when we set the Node ENV to 'PRODUCTION' - no syntheticEvent errors.

Furthermore, the app runs in dev mode (with hot reloading) just fine using the previous stack, which includes the following NPM versions:

"react": "^0.14.8",
"react-dom": "^0.14.3",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.0",

"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"

"babel": "^6.5.2",
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.0.2",
"babel-plugin-transform-react-constant-elements": "^6.0.2",
"babel-preset-es2015": "^6.0.8",
"babel-preset-react": "^6.0.2",

NOTE: Obviously, there have been some pretty significant changes to both React and Webpack. We've done our best to integrate the new stuff correctly, and I wonder if the the new Webpack formatting is throwing us problems?

The older stack did not use the ES6 React syntax - but we've implemented (temporarily) the create-react-class polyfill. We're overhauling to an ES6 / MobX approach, but obviously, the thing needs to work in dev mode first.

Any ideas on why it would throw this error?

via Zfalen