fix: always use the regular function to avoid losing module context (#531)

Co-authored-by: Michael Mok <[email protected]>

Author: latin-1

lib/utils/makeRefreshRuntimeModule.js

@@ -27,45 +27,44 @@ function makeRefreshRuntimeModule(webpack) {
             `${
               runtimeTemplate.supportsConst() ? 'const' : 'var'
             } originalFactory = options.factory;`,
-            `options.factory = ${runtimeTemplate.basicFunction(
-              'moduleObject, moduleExports, webpackRequire',
-              [
-                `${refreshGlobal}.setup(options.id);`,
-                'try {',
-                webpack.Template.indent(
-                  'originalFactory.call(this, moduleObject, moduleExports, webpackRequire);'
-                ),
-                '} finally {',
+            `options.factory = function (moduleObject, moduleExports, webpackRequire) {`,
+            webpack.Template.indent([
+              `${refreshGlobal}.setup(options.id);`,
+              'try {',
+              webpack.Template.indent(
+                'originalFactory.call(this, moduleObject, moduleExports, webpackRequire);'
+              ),
+              '} finally {',
+              webpack.Template.indent([
+                `if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {`,
                 webpack.Template.indent([
-                  `if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {`,
+                  // 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([
-                    // 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);`,
-                        'return result;',
-                      ])},`,
-                      runtimeTemplate.basicFunction('reason', [
-                        `${refreshGlobal}.cleanup(options.id);`,
-                        'return Promise.reject(reason);',
-                      ]),
+                    `${runtimeTemplate.basicFunction('result', [
+                      `${refreshGlobal}.cleanup(options.id);`,
+                      'return result;',
+                    ])},`,
+                    runtimeTemplate.basicFunction('reason', [
+                      `${refreshGlobal}.cleanup(options.id);`,
+                      'return Promise.reject(reason);',
                     ]),
-                    `);`,
                   ]),
-                  '} else {',
-                  webpack.Template.indent(`${refreshGlobal}.cleanup(options.id)`),
-                  '}',
+                  `);`,
                 ]),
+                '} else {',
+                webpack.Template.indent(`${refreshGlobal}.cleanup(options.id)`),
                 '}',
-              ]
-            )}`,
+              ]),
+              '}',
+            ]),
+            `};`,
           ]
         )})`,
         '',

test/unit/makeRefreshRuntimeModule.test.js

@@ -40,7 +40,7 @@ describe.skipIf(WEBPACK_VERSION !== 5, 'makeRefreshRuntimeModule', () => {
     expect(runtime).toMatchInlineSnapshot(`
 "__webpack_require__.i.push(function(options) {
 	var originalFactory = options.factory;
-	options.factory = function(moduleObject, moduleExports, webpackRequire) {
+	options.factory = function (moduleObject, moduleExports, webpackRequire) {
 		__webpack_require__.$Refresh$.setup(options.id);
 		try {
 			originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
@@ -60,7 +60,7 @@ describe.skipIf(WEBPACK_VERSION !== 5, 'makeRefreshRuntimeModule', () => {
 				__webpack_require__.$Refresh$.cleanup(options.id)
 			}
 		}
-	}
+	};
 })
 
 __webpack_require__.$Refresh$ = {
@@ -119,7 +119,7 @@ __webpack_require__.$Refresh$ = {
     expect(runtime).toMatchInlineSnapshot(`
 "__webpack_require__.i.push((options) => {
 	const originalFactory = options.factory;
-	options.factory = (moduleObject, moduleExports, webpackRequire) => {
+	options.factory = function (moduleObject, moduleExports, webpackRequire) {
 		__webpack_require__.$Refresh$.setup(options.id);
 		try {
 			originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
@@ -139,7 +139,7 @@ __webpack_require__.$Refresh$ = {
 				__webpack_require__.$Refresh$.cleanup(options.id)
 			}
 		}
-	}
+	};
 })
 
 __webpack_require__.$Refresh$ = {