fix: ensure async modules would wait for cleanup before progressing (#493)

Author: pmmmwh

lib/utils/makeRefreshRuntimeModule.js

@@ -39,9 +39,14 @@ function makeRefreshRuntimeModule(webpack) {
                 webpack.Template.indent([
                   `if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {`,
                   webpack.Template.indent([
-                    // Ponyfill `Promise.finally` as it is only part of the spec after ES2018,
-                    // and Webpack's top level await implementation only rely on ES2015 Promises.
-                    'options.module.exports.then(',
+                    // The exports of the module are re-assigned -
+                    // this ensures anything coming after us would wait for `cleanup` to fire.
+                    // This is particularly important because `cleanup` restores the refresh global,
+                    // maintaining consistency for mutable variables like `moduleId`.
+                    // This `.then` clause is a ponyfill of the `Promise.finally` API -
+                    // it is only part of the spec after ES2018,
+                    // but Webpack's top level await implementation support engines down to ES2015.
+                    'options.module.exports = options.module.exports.then(',
                     webpack.Template.indent([
                       `${runtimeTemplate.basicFunction('result', [
                         `${refreshGlobal}.cleanup(options.id);`,

test/unit/makeRefreshRuntimeModule.test.js

@@ -46,7 +46,7 @@ describe.skipIf(WEBPACK_VERSION !== 5, 'makeRefreshRuntimeModule', () => {
 			originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
 		} finally {
 			if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {
-				options.module.exports.then(
+				options.module.exports = options.module.exports.then(
 					function(result) {
 						__webpack_require__.$Refresh$.cleanup(options.id);
 						return result;
@@ -125,7 +125,7 @@ __webpack_require__.$Refresh$ = {
 			originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
 		} finally {
 			if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {
-				options.module.exports.then(
+				options.module.exports = options.module.exports.then(
 					(result) => {
 						__webpack_require__.$Refresh$.cleanup(options.id);
 						return result;