Skip to content

Commit b0cd9b1

Browse files
Timeless0911Timeless0911
committed
fix: use __webpack_global__ in loader if available
1 parent 2f4cef9 commit b0cd9b1

6 files changed

Lines changed: 34 additions & 16 deletions

File tree

‎loader/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const {
1212
getModuleSystem,
1313
getRefreshModuleRuntime,
1414
normalizeOptions,
15+
RefreshGlobals,
1516
} = require('./utils');
1617
const schema = require('./options.json');
1718

@@ -45,11 +46,11 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
4546

4647
const RefreshSetupRuntimes = {
4748
cjs: Template.asString(
48-
`__webpack_require__.$Refresh$.runtime = require('${RefreshRuntimePath}');`
49+
`${RefreshGlobals}.$Refresh$.runtime = require('${RefreshRuntimePath}');`
4950
),
5051
esm: Template.asString([
5152
`import * as __react_refresh_runtime__ from '${RefreshRuntimePath}';`,
52-
`__webpack_require__.$Refresh$.runtime = __react_refresh_runtime__;`,
53+
`${RefreshGlobals}.$Refresh$.runtime = __react_refresh_runtime__;`,
5354
]),
5455
};
5556

@@ -67,6 +68,7 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
6768
const RefreshModuleRuntime = getRefreshModuleRuntime(Template, {
6869
const: options.const,
6970
moduleSystem,
71+
refreshGlobals: RefreshGlobals,
7072
});
7173

7274
if (this.sourceMap) {

‎loader/utils/RefreshGlobals.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// When available, use `__webpack_global__` which is a stable runtime function to use `__webpack_require__` in this compilation
2+
// See: https://github.com/webpack/webpack/issues/20139
3+
const RefreshGlobals = `(typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__)`;
4+
5+
module.exports = RefreshGlobals;

‎loader/utils/getRefreshModuleRuntime.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* @typedef ModuleRuntimeOptions {Object}
33
* @property {boolean} const Use ES6 `const` and `let` in generated runtime code.
44
* @property {'cjs' | 'esm'} moduleSystem The module system to be used.
5+
* @property {string} refreshGlobals The global runtime function where React Refresh runtime is injected.
56
*/
67

78
/**
@@ -20,8 +21,9 @@ function getRefreshModuleRuntime(Template, options) {
2021
const constDeclaration = options.const ? 'const' : 'var';
2122
const letDeclaration = options.const ? 'let' : 'var';
2223
const webpackHot = options.moduleSystem === 'esm' ? 'import.meta.webpackHot' : 'module.hot';
24+
const refreshGlobals = options.refreshGlobals;
2325
return Template.asString([
24-
`${constDeclaration} $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;`,
26+
`${constDeclaration} $ReactRefreshModuleId$ = ${refreshGlobals}.$Refresh$.moduleId;`,
2527
`${constDeclaration} $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(`,
2628
Template.indent('$ReactRefreshModuleId$'),
2729
');',

‎loader/utils/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ const getIdentitySourceMap = require('./getIdentitySourceMap');
22
const getModuleSystem = require('./getModuleSystem');
33
const getRefreshModuleRuntime = require('./getRefreshModuleRuntime');
44
const normalizeOptions = require('./normalizeOptions');
5+
const RefreshGlobals = require('./RefreshGlobals');
56

67
module.exports = {
78
getIdentitySourceMap,
89
getModuleSystem,
910
getRefreshModuleRuntime,
1011
normalizeOptions,
12+
RefreshGlobals,
1113
};

‎test/loader/loader.test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ describe('loader', () => {
1616
const { execution, parsed } = compilation.module;
1717

1818
expect(parsed).toMatchInlineSnapshot(`
19-
"__webpack_require__.$Refresh$.runtime = require('react-refresh');
19+
"(typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.runtime = require('react-refresh');
2020
2121
module.exports = 'Test';
2222
2323
24-
var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
24+
var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
2525
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
2626
$ReactRefreshModuleId$
2727
);
@@ -61,12 +61,12 @@ describe('loader', () => {
6161
\\******************/
6262
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
6363
64-
__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! react-refresh */ "../../../../node_modules/react-refresh/runtime.js");
64+
(typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.runtime = __webpack_require__(/*! react-refresh */ "../../../../node_modules/react-refresh/runtime.js");
6565
6666
module.exports = 'Test';
6767
6868
69-
var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
69+
var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
7070
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
7171
$ReactRefreshModuleId$
7272
);
@@ -118,12 +118,12 @@ describe('loader', () => {
118118

119119
expect(parsed).toMatchInlineSnapshot(`
120120
"import * as __react_refresh_runtime__ from 'react-refresh';
121-
__webpack_require__.$Refresh$.runtime = __react_refresh_runtime__;
121+
(typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.runtime = __react_refresh_runtime__;
122122
123123
export default 'Test';
124124
125125
126-
var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
126+
var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
127127
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
128128
$ReactRefreshModuleId$
129129
);
@@ -171,12 +171,12 @@ describe('loader', () => {
171171
/* harmony export */ });
172172
/* harmony import */ var react_refresh__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-refresh */ "../../../../node_modules/react-refresh/runtime.js");
173173
174-
__webpack_require__.$Refresh$.runtime = /*#__PURE__*/ (react_refresh__WEBPACK_IMPORTED_MODULE_0___namespace_cache || (react_refresh__WEBPACK_IMPORTED_MODULE_0___namespace_cache = __webpack_require__.t(react_refresh__WEBPACK_IMPORTED_MODULE_0__, 2)));
174+
(typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.runtime = /*#__PURE__*/ (react_refresh__WEBPACK_IMPORTED_MODULE_0___namespace_cache || (react_refresh__WEBPACK_IMPORTED_MODULE_0___namespace_cache = __webpack_require__.t(react_refresh__WEBPACK_IMPORTED_MODULE_0__, 2)));
175175
176176
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ('Test');
177177
178178
179-
var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
179+
var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
180180
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
181181
$ReactRefreshModuleId$
182182
);

‎test/loader/unit/getRefreshModuleRuntime.test.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
const { Template } = require('webpack');
2-
const getRefreshModuleRuntime = require('../../../loader/utils/getRefreshModuleRuntime');
2+
const {
3+
getRefreshModuleRuntime,
4+
RefreshGlobals: refreshGlobals,
5+
} = require('../../../loader/utils');
36

47
describe('getRefreshModuleRuntime', () => {
58
it('should return working refresh module runtime without const using CommonJS', () => {
69
const refreshModuleRuntime = getRefreshModuleRuntime(Template, {
710
const: false,
811
moduleSystem: 'cjs',
12+
refreshGlobals,
913
});
1014

1115
expect(refreshModuleRuntime.indexOf('var')).not.toBe(-1);
@@ -14,7 +18,7 @@ describe('getRefreshModuleRuntime', () => {
1418
expect(refreshModuleRuntime.indexOf('module.hot')).not.toBe(-1);
1519
expect(refreshModuleRuntime.indexOf('import.meta.webpackHot')).toBe(-1);
1620
expect(refreshModuleRuntime).toMatchInlineSnapshot(`
17-
"var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
21+
"var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
1822
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
1923
$ReactRefreshModuleId$
2024
);
@@ -51,6 +55,7 @@ describe('getRefreshModuleRuntime', () => {
5155
const refreshModuleRuntime = getRefreshModuleRuntime(Template, {
5256
const: true,
5357
moduleSystem: 'cjs',
58+
refreshGlobals,
5459
});
5560

5661
expect(refreshModuleRuntime.indexOf('var')).toBe(-1);
@@ -59,7 +64,7 @@ describe('getRefreshModuleRuntime', () => {
5964
expect(refreshModuleRuntime.indexOf('module.hot')).not.toBe(-1);
6065
expect(refreshModuleRuntime.indexOf('import.meta.webpackHot')).toBe(-1);
6166
expect(refreshModuleRuntime).toMatchInlineSnapshot(`
62-
"const $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
67+
"const $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
6368
const $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
6469
$ReactRefreshModuleId$
6570
);
@@ -96,6 +101,7 @@ describe('getRefreshModuleRuntime', () => {
96101
const refreshModuleRuntime = getRefreshModuleRuntime(Template, {
97102
const: false,
98103
moduleSystem: 'esm',
104+
refreshGlobals,
99105
});
100106

101107
expect(refreshModuleRuntime.indexOf('var')).not.toBe(-1);
@@ -104,7 +110,7 @@ describe('getRefreshModuleRuntime', () => {
104110
expect(refreshModuleRuntime.indexOf('module.hot')).toBe(-1);
105111
expect(refreshModuleRuntime.indexOf('import.meta.webpackHot')).not.toBe(-1);
106112
expect(refreshModuleRuntime).toMatchInlineSnapshot(`
107-
"var $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
113+
"var $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
108114
var $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
109115
$ReactRefreshModuleId$
110116
);
@@ -141,6 +147,7 @@ describe('getRefreshModuleRuntime', () => {
141147
const refreshModuleRuntime = getRefreshModuleRuntime(Template, {
142148
const: true,
143149
moduleSystem: 'esm',
150+
refreshGlobals,
144151
});
145152

146153
expect(refreshModuleRuntime.indexOf('var')).toBe(-1);
@@ -149,7 +156,7 @@ describe('getRefreshModuleRuntime', () => {
149156
expect(refreshModuleRuntime.indexOf('module.hot')).toBe(-1);
150157
expect(refreshModuleRuntime.indexOf('import.meta.webpackHot')).not.toBe(-1);
151158
expect(refreshModuleRuntime).toMatchInlineSnapshot(`
152-
"const $ReactRefreshModuleId$ = __webpack_require__.$Refresh$.moduleId;
159+
"const $ReactRefreshModuleId$ = (typeof __webpack_global__ !== 'undefined' ? __webpack_global__ : __webpack_require__).$Refresh$.moduleId;
153160
const $ReactRefreshCurrentExports$ = __react_refresh_utils__.getModuleExports(
154161
$ReactRefreshModuleId$
155162
);

0 commit comments

Comments
 (0)