From 883512b10398cb47bab079de4f8fa87cfcb0fc1b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 8 Sep 2017 15:28:05 -0400 Subject: [PATCH 1/2] Reload the page when an error has occurred Fixes #3096 --- packages/react-dev-utils/webpackHotDevClient.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 18a6a4a0ae1..50ff451fc50 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -28,9 +28,18 @@ var ErrorOverlay = require('react-error-overlay'); ErrorOverlay.startReportingRuntimeErrors({ launchEditorEndpoint: launchEditorEndpoint, onError: function() { - // TODO: why do we need this? - if (module.hot && typeof module.hot.decline === 'function') { - module.hot.decline(); + // Ensure HotModuleReplacementPlugin is active + if (module.hot && typeof module.hot.addStatusHandler === 'function') { + // When a run time error occurs, it does not make sense to continue HMR; + // as application state may be corrupted. + // So, next time we check for updates, simply reload the page (to + // abort the process). + // See https://github.com/facebookincubator/create-react-app/issues/3096 + module.hot.addStatusHandler(function(status) { + if (status === 'check') { + window.location.reload(); + } + }); } }, filename: '/static/js/bundle.js', From 9fad94bfebdde205a29326332a2a7d5e2a201585 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 8 Sep 2017 20:06:26 -0400 Subject: [PATCH 2/2] Use a global boolean instead --- .../react-dev-utils/webpackHotDevClient.js | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 50ff451fc50..b0508dc4d23 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -25,22 +25,17 @@ var launchEditorEndpoint = require('./launchEditorEndpoint'); var formatWebpackMessages = require('./formatWebpackMessages'); var ErrorOverlay = require('react-error-overlay'); +// We need to keep track of if there has been a runtime error. +// Essentially, we cannot guarantee application state was not corrupted by the +// runtime error. To prevent confusing behavior, we forcibly reload the entire +// application. This is handled below when we are notified of a compile (code +// change). +// See https://github.com/facebookincubator/create-react-app/issues/3096 +var hadRuntimeError = false; ErrorOverlay.startReportingRuntimeErrors({ launchEditorEndpoint: launchEditorEndpoint, onError: function() { - // Ensure HotModuleReplacementPlugin is active - if (module.hot && typeof module.hot.addStatusHandler === 'function') { - // When a run time error occurs, it does not make sense to continue HMR; - // as application state may be corrupted. - // So, next time we check for updates, simply reload the page (to - // abort the process). - // See https://github.com/facebookincubator/create-react-app/issues/3096 - module.hot.addStatusHandler(function(status) { - if (status === 'check') { - window.location.reload(); - } - }); - } + hadRuntimeError = true; }, filename: '/static/js/bundle.js', }); @@ -236,7 +231,7 @@ function tryApplyUpdates(onHotUpdateSuccess) { } function handleApplyUpdates(err, updatedModules) { - if (err || !updatedModules) { + if (err || !updatedModules || hadRuntimeError) { window.location.reload(); return; }