webpack: Full page reload on syntax errors during hot reloads

• Operating System: Mac 10.13.6
• Node Version: 11.8.0
• NPM Version: 6.5.0
• webpack Version: 4.29.0
• webpack-dev-server Version: 3.1.14

• This is a bug
• This is a modification request

Code

  // webpack.config.js
{
	mode: 'development',
	devServer: {
		contentBase: 'build/',
		hot: true,
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
	],
}

// get a foo
var foo = require('./foo')

if (module.hot) {
    module.hot.accept('./foo', function () {
        // clean up the old foo
        foo.dispose()
        // replace it with a new one
        foo = require('./foo')
    })
}

Actual Behavior

Above is a super-minimal version of my HMR setup - it works fine, whenever foo.js changes it gets hot reloaded, so far so good.

The problem occurs when there’s some kind of error in the HMR handler - for example, a syntax error inside foo.dispose(). When that’s the case, then whenever you edit foo.js, the HMR handler executes and dev-server catch the syntax error, and then fully reloads the page. This prevents the developer from knowing there’s a syntax error - it just looks like HMR has stopped working.

Expected Behavior

WDS should allow the error to be caught by the browser so the developer can see it - or if there’s a really good reason not to, I guess have an option to prevent the automatic reloading?

For Bugs; How can we reproduce the behavior?

As far as I can tell any kind of syntax error inside the HMR event handler function causes this.

Thanks!