fix: use __webpack_global__ in loader if available

Author: Timeless0911

loader/index.js

@@ -41,15 +41,20 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
 
   const callback = this.async();
 
-  const { ModuleFilenameHelpers, Template } = this._compiler.webpack || require('webpack');
+  const { ModuleFilenameHelpers, Template, RuntimeGlobals } =
+    this._compiler.webpack || require('webpack');
+
+  // When available, use `__webpack_global__` which is a stable runtime function to use `__webpack_require__` in this compilation
+  // See: https://github.com/webpack/webpack/issues/20139
+  const RefreshGlobals = `typeof __webpack_global__ === 'function' ? __webpack_global__ : __webpack_require__`;
 
   const RefreshSetupRuntimes = {
     cjs: Template.asString(
-      `__webpack_require__.$Refresh$.runtime = require('${RefreshRuntimePath}');`
+      `${RefreshGlobals}.$Refresh$.runtime = require('${RefreshRuntimePath}');`
     ),
     esm: Template.asString([
       `import * as __react_refresh_runtime__ from '${RefreshRuntimePath}';`,
-      `__webpack_require__.$Refresh$.runtime = __react_refresh_runtime__;`,
+      `${RefreshGlobals}.$Refresh$.runtime = __react_refresh_runtime__;`,
     ]),
   };
 
@@ -67,6 +72,7 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
     const RefreshModuleRuntime = getRefreshModuleRuntime(Template, {
       const: options.const,
       moduleSystem,
+      refreshGlobals: RefreshGlobals,
     });
 
     if (this.sourceMap) {

loader/utils/getRefreshModuleRuntime.js

@@ -2,6 +2,7 @@
  * @typedef ModuleRuntimeOptions {Object}
  * @property {boolean} const Use ES6 `const` and `let` in generated runtime code.
  * @property {'cjs' | 'esm'} moduleSystem The module system to be used.
+ * @property {string} refreshGlobals The global runtime function where React Refresh runtime is injected.
  */
 
 /**
@@ -20,8 +21,9 @@ function getRefreshModuleRuntime(Template, options) {
   const constDeclaration = options.const ? 'const' : 'var';
   const letDeclaration = options.const ? 'let' : 'var';
   const webpackHot = options.moduleSystem === 'esm' ? 'import.meta.webpackHot' : 'module.hot';
+  const refreshGlobals = options.refreshGlobals;
   return Template.asString([
-    `${constDeclaration} $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;`,
+    `${constDeclaration} $ReactRefreshModuleId$ = ${refreshGlobals}.$Refresh$.moduleId;`,
     `${constDeclaration} $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(`,
     Template.indent('$ReactRefreshModuleId$'),
     ');',