fix: ensure this propagates through module execution interceptor (#921)

Author: pmmmwh

lib/utils/makeRefreshRuntimeModule.js

@@ -1,9 +1,9 @@
 /**
  * Makes a runtime module to intercept module execution for React Refresh.
- * This module creates an isolated __webpak_require__ function for each module
- * and injects a $Refresh$ object into it for use by react-refresh.
+ * This module creates an isolated `__webpack_require__` function for each module,
+ * and injects a `$Refresh$` object into it for use by React Refresh.
  * @param {import('webpack')} webpack The Webpack exports.
- * @returns {ReactRefreshRuntimeModule} The runtime module class.
+ * @returns {typeof import('webpack').RuntimeModule} The runtime module class.
  */
 function makeRefreshRuntimeModule(webpack) {
   return class ReactRefreshRuntimeModule extends webpack.RuntimeModule {
@@ -17,6 +17,8 @@ function makeRefreshRuntimeModule(webpack) {
      * @returns {string} runtime code
      */
     generate() {
+      if (!this.compilation) throw new Error('Webpack compilation missing!');
+
       const { runtimeTemplate } = this.compilation;
       const constDeclaration = runtimeTemplate.supportsConst() ? 'const' : 'var';
       return webpack.Template.asString([
@@ -48,45 +50,46 @@ function makeRefreshRuntimeModule(webpack) {
           'options',
           [
             `${constDeclaration} originalFactory = options.factory;`,
-            `options.factory = ${runtimeTemplate.basicFunction(
-              'moduleObject, moduleExports, webpackRequire',
-              [
-                // Our require function delegates to the original require function
-                `${constDeclaration} hotRequire = ${runtimeTemplate.returningFunction(
-                  'webpackRequire(request)',
-                  'request'
-                )};`,
-                // The propery descriptor factory below
-                // ensures all properties but $Refresh$ are proxied through to the original require function
-                `${constDeclaration} createPropertyDescriptor = ${runtimeTemplate.basicFunction(
-                  'name',
-                  [
-                    `return {`,
-                    webpack.Template.indent([
-                      `configurable: true,`,
-                      `enumerable: true,`,
-                      `get: ${runtimeTemplate.returningFunction('webpackRequire[name]')},`,
-                      `set: ${runtimeTemplate.basicFunction('value', [
-                        'webpackRequire[name] = value;',
-                      ])},`,
-                    ]),
-                    `};`,
-                  ]
-                )};`,
-                `for (${constDeclaration} name in webpackRequire) {`,
-                webpack.Template.indent([
-                  'if (name === "$Refresh$") continue;',
-                  'if (Object.prototype.hasOwnProperty.call(webpackRequire, name)) {',
+            // Using a function declaration -
+            // ensures `this` would propagate for modules relying on it
+            `options.factory = function(moduleObject, moduleExports, webpackRequire) {`,
+            webpack.Template.indent([
+              // Our require function delegates to the original require function
+              `${constDeclaration} hotRequire = ${runtimeTemplate.returningFunction(
+                'webpackRequire(request)',
+                'request'
+              )};`,
+              // The propery descriptor factory below ensures all properties but `$Refresh$`
+              // are proxied through to the original require function
+              `${constDeclaration} createPropertyDescriptor = ${runtimeTemplate.basicFunction(
+                'name',
+                [
+                  `return {`,
                   webpack.Template.indent([
-                    `Object.defineProperty(hotRequire, name, createPropertyDescriptor(name));`,
+                    `configurable: true,`,
+                    `enumerable: true,`,
+                    `get: ${runtimeTemplate.returningFunction('webpackRequire[name]')},`,
+                    `set: ${runtimeTemplate.basicFunction('value', [
+                      'webpackRequire[name] = value;',
+                    ])},`,
                   ]),
-                  `}`,
+                  `};`,
+                ]
+              )};`,
+              `for (${constDeclaration} name in webpackRequire) {`,
+              webpack.Template.indent([
+                'if (name === "$Refresh$") continue;',
+                'if (Object.prototype.hasOwnProperty.call(webpackRequire, name)) {',
+                webpack.Template.indent([
+                  `Object.defineProperty(hotRequire, name, createPropertyDescriptor(name));`,
                 ]),
                 `}`,
-                `hotRequire.$Refresh$ = setup(options.id);`,
-                `originalFactory.call(this, moduleObject, moduleExports, hotRequire);`,
-              ]
-            )};`,
+              ]),
+              `}`,
+              `hotRequire.$Refresh$ = setup(options.id);`,
+              `originalFactory.call(this, moduleObject, moduleExports, hotRequire);`,
+            ]),
+            '};',
           ]
         )});`,
       ]);

test/unit/makeRefreshRuntimeModule.test.js

@@ -118,7 +118,7 @@ __webpack_require__.i.push(function(options) {
 
 __webpack_require__.i.push((options) => {
 	const originalFactory = options.factory;
-	options.factory = (moduleObject, moduleExports, webpackRequire) => {
+	options.factory = function(moduleObject, moduleExports, webpackRequire) {
 		const hotRequire = (request) => (webpackRequire(request));
 		const createPropertyDescriptor = (name) => {
 			return {