fix: get module system scoped to context (#768)

Author: pmmmwh

loader/index.js

@@ -55,13 +55,18 @@ function ReactRefreshLoader(source, inputSourceMap, meta) {
   };
 
   /**
-   * @this {import('webpack').loader.LoaderContext}
+   * @this {import('webpack').LoaderContext<import('./types').ReactRefreshLoaderOptions>}
    * @param {string} source
    * @param {import('source-map').RawSourceMap} [inputSourceMap]
    * @returns {Promise<[string, import('source-map').RawSourceMap]>}
    */
   async function _loader(source, inputSourceMap) {
-    const moduleSystem = await getModuleSystem.call(this, ModuleFilenameHelpers, options);
+    /** @type {'esm' | 'cjs'} */
+    let moduleSystem = 'cjs';
+    // Only try to resolve the module system if the environment is known to support ES syntax
+    if (this.environment != null) {
+      moduleSystem = await getModuleSystem.call(this, ModuleFilenameHelpers, options);
+    }
 
     const RefreshSetupRuntime = RefreshSetupRuntimes[moduleSystem];
     const RefreshModuleRuntime = getRefreshModuleRuntime(Template, {

loader/utils/getModuleSystem.js

@@ -3,8 +3,8 @@ const path = require('path');
 const commonPathPrefix = require('common-path-prefix');
 const findUp = require('find-up');
 
-/** @type {string | undefined} */
-let packageJsonType;
+/** @type {Map<string, string | undefined>} */
+let packageJsonTypeMap = new Map();
 
 /**
  * Infers the current active module system from loader context and options.
@@ -45,6 +45,7 @@ async function getModuleSystem(ModuleFilenameHelpers, options) {
 
   // Load users' `package.json` -
   // We will cache the results in a global variable so it will only be parsed once.
+  let packageJsonType = packageJsonTypeMap.get(this.rootContext);
   if (!packageJsonType) {
     try {
       const commonPath = commonPathPrefix([this.rootContext, this.resourcePath], '/');
@@ -61,6 +62,7 @@ async function getModuleSystem(ModuleFilenameHelpers, options) {
       const buffer = await fsPromises.readFile(packageJsonPath, { encoding: 'utf-8' });
       const rawPackageJson = buffer.toString('utf-8');
       ({ type: packageJsonType } = JSON.parse(rawPackageJson));
+      packageJsonTypeMap.set(this.rootContext, packageJsonType);
     } catch (e) {
       // Failed to parse `package.json`, do nothing.
     }

test/loader/loader.test.js

@@ -337,7 +337,8 @@ describe('loader', () => {
       const { execution, parsed } = compilation.module;
 
       expect(parsed).toMatchInlineSnapshot(`
-        "__webpack_require__.$Refresh$.runtime = require('react-refresh');
+        "import * as __react_refresh_runtime__ from 'react-refresh';
+        __webpack_require__.$Refresh$.runtime = __react_refresh_runtime__;
 
         export default 'Test';
 
@@ -348,7 +349,7 @@ describe('loader', () => {
         );
 
         function $ReactRefreshModuleRuntime$(exports) {
-        	if (module.hot) {
+        	if (import.meta.webpackHot) {
         		var errorOverlay;
         		if (typeof __react_refresh_error_overlay__ !== 'undefined') {
         			errorOverlay = __react_refresh_error_overlay__;
@@ -360,7 +361,7 @@ describe('loader', () => {
         		return __react_refresh_utils__.executeRuntime(
         			exports,
         			$ReactRefreshModuleId$,
-        			module.hot,
+        			import.meta.webpackHot,
         			errorOverlay,
         			testMode
         		);
@@ -381,13 +382,15 @@ describe('loader', () => {
         /*!******************!*\\\\
           !*** ./index.js ***!
           \\\\******************/
-        /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+        /***/ ((__webpack_module__, __webpack_exports__, __webpack_require__) => {
 
         __webpack_require__.r(__webpack_exports__);
         /* harmony export */ __webpack_require__.d(__webpack_exports__, {
         /* harmony export */   \\"default\\": () => (__WEBPACK_DEFAULT_EXPORT__)
         /* harmony export */ });
-        __webpack_require__.$Refresh$.runtime = require('react-refresh');
+        /* harmony import */ var react_refresh__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-refresh */ \\"../../../../node_modules/react-refresh/runtime.js\\");
+
+        __webpack_require__.$Refresh$.runtime = react_refresh__WEBPACK_IMPORTED_MODULE_0__;
 
         /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ('Test');
 
@@ -398,7 +401,7 @@ describe('loader', () => {
         );
 
         function $ReactRefreshModuleRuntime$(exports) {
-        	if (module.hot) {
+        	if (true) {
         		var errorOverlay;
         		if (typeof __react_refresh_error_overlay__ !== 'undefined') {
         			errorOverlay = __react_refresh_error_overlay__;
@@ -410,7 +413,7 @@ describe('loader', () => {
         		return __react_refresh_utils__.executeRuntime(
         			exports,
         			$ReactRefreshModuleId$,
-        			module.hot,
+        			__webpack_module__.hot,
         			errorOverlay,
         			testMode
         		);
@@ -428,7 +431,8 @@ describe('loader', () => {
         },
         /******/ __webpack_require__ => { // webpackRuntimeModules
         /******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
-        /******/ var __webpack_exports__ = (__webpack_exec__(\\"./index.js\\"));
+        /******/ __webpack_require__.O(0, [\\"defaultVendors\\"], () => (__webpack_exec__(\\"./index.js\\")));
+        /******/ var __webpack_exports__ = __webpack_require__.O();
         /******/ }
         ]);"
       `);