@lynx-js/react-refresh-webpack-plugin-canary 0.4.0 → 0.4.1-canary-20260708-0d8a1843

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lynx-js/react-refresh-webpack-plugin
 
+## 0.4.1-canary-20260708040538-0d8a18437178b669c77de05c337bd9f248bfa45f
+
+### Patch Changes
+
+- Fix `isComponent is not a function` crashing the HMR runtime when ReactLynx is consumed as an async external bundle. ([#2928](https://github.com/lynx-family/lynx-stack/pull/2928))
+
+  The refresh helpers were injected via `ProvidePlugin`, whose dependency edge does not participate in async-module handling, so `@lynx-js/react/refresh` resolved to a pending Promise and `isComponent`/`flush` were `undefined`. They now ship as an ESM module (`runtime/refresh.mjs`) injected by the loader as a real import, awaited through the normal async-module machinery.
+
 ## 0.4.0
 
 ### Minor Changes

package/lib/ReactRefreshRspackPlugin.js

@@ -90,13 +90,14 @@ export class ReactRefreshRspackPlugin {
             return;
         }
         const { ProvidePlugin } = compiler.webpack;
-        const provide = {
-            __prefresh_utils__: path.resolve(__dirname, '../runtime/refresh.cjs'),
-        };
+        // `__prefresh_utils__` is injected by the loader (`../loader.cjs`) as an ESM
+        // import, not here — only the optional error overlay still needs
+        // `ProvidePlugin`.
         if (this.#options.overlay) {
-            provide['__prefresh_errors__'] = this.#options.overlay.module;
+            new ProvidePlugin({
+                __prefresh_errors__: this.#options.overlay.module,
+            }).apply(compiler);
         }
-        new ProvidePlugin(provide).apply(compiler);
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
             compilation.hooks.runtimeModule.tap(PLUGIN_NAME, (runtimeModule) => {
                 if (runtimeModule.name === 'hot_module_replacement') {

package/loader.cjs

@@ -9,8 +9,27 @@ const LOADER_RUNTIME = fs.readFileSync(
   'utf-8',
 );
 
+const REFRESH_RUNTIME_ABS = path.resolve(__dirname, './runtime/refresh.mjs');
+
 const RefreshHotLoader = function RefreshHotLoader(source, inputSourceMap) {
-  this.callback(null, source + '\n\n' + LOADER_RUNTIME, inputSourceMap);
+  // Inject `__prefresh_utils__` as a real ESM import (not `ProvidePlugin`): only
+  // harmony edges are async-awaited, so the footer sees resolved
+  // `isComponent`/`flush` under async externals. Relative request keeps the
+  // bundler-derived binding name stable across machines/snapshots.
+  let request = path
+    .relative(path.dirname(this.resourcePath), REFRESH_RUNTIME_ABS)
+    .replace(/\\/g, '/');
+  if (!request.startsWith('.')) {
+    request = './' + request;
+  }
+  const importPrefreshUtils = `\nimport * as __prefresh_utils__ from ${
+    JSON.stringify(request)
+  };\n`;
+  this.callback(
+    null,
+    source + '\n\n' + LOADER_RUNTIME + importPrefreshUtils,
+    inputSourceMap,
+  );
 };
 
 module.exports = RefreshHotLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-refresh-webpack-plugin-canary",
-  "version": "0.4.0",
+  "version": "0.4.1-canary-20260708-0d8a1843",
   "description": "A webpack plugin to hot refresh for Lynx.",
   "keywords": [
     "webpack",
@@ -39,9 +39,9 @@
     "@rspack/lite-tapable": "1.1.0",
     "@rstest/core": "0.10.5",
     "swc-loader": "^0.2.7",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.121.2",
-    "@lynx-js/react-webpack-plugin": "npm:@lynx-js/react-webpack-plugin-canary@0.9.4",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.122.1",
     "@lynx-js/react-refresh": "0.1.0",
+    "@lynx-js/react-webpack-plugin": "npm:@lynx-js/react-webpack-plugin-canary@0.9.5",
     "@lynx-js/test-tools": "0.0.0"
   },
   "peerDependencies": {

package/runtime/{refresh.cjs → refresh.mjs}

@@ -1,4 +1,8 @@
-const { isComponent, flush } = require('@lynx-js/react/refresh');
+// ESM (imported via `../loader.cjs`), not `ProvidePlugin`:
+// `@lynx-js/react/refresh` is an async module under async externals, and only a
+// harmony import edge is awaited, so the injected footer sees resolved
+// `isComponent`/`flush`.
+import { flush, isComponent } from '@lynx-js/react/refresh';
 
 // eslint-disable-next-line
 const getExports = m => m.exports || m.__proto__.exports;
@@ -52,9 +56,4 @@ const shouldBind = m => {
   return isCitizen;
 };
 
-module.exports = Object.freeze({
-  getExports,
-  shouldBind,
-  flush,
-  registerExports,
-});
+export { flush, getExports, registerExports, shouldBind };