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!

[fenomas]

@evilebottnawi Uhhhh I’d better start over 😁

Currently, when there’s a syntax error inside an HMR callback, WDS reloads the page, right? That’s what should be happening in the minimal reproduction repo, step 3.

The issue I’m reporting is that WDS should not reload the page in this case. If WDS doesn’t reload the page, then the HMR callback will execute and the browser will catch the error and so forth.

Hope that’s clearer!

[fenomas]

@evilebottnawi The code samples above are already the minimal repro, there’s nothing else in the project.

Here’s the same code in a repo: https://github.com/andyhall/wds_hmr_issue