fix: hmr don't with React.lazy + import() Component (#1369)

* fix: hmr don't work with import() entry * ci: fix by lock umi's version to ~4.2
umijs · Jul 3, 2024 · e271894 · e271894
1 parent 06b1b5e
commit e271894
Show file tree

Hide file tree

Showing 8 changed files with 1,450 additions and 392 deletions.
diff --git a/crates/mako/src/visitors/dynamic_import.rs b/crates/mako/src/visitors/dynamic_import.rs
@@ -9,7 +9,9 @@ use swc_core::ecma::utils::{
 };
 use swc_core::ecma::visit::{VisitMut, VisitMutWith};
 
-use crate::ast::utils::{is_dynamic_import, member_call, member_prop, promise_all, require_ensure};
+use crate::ast::utils::{
+    id, is_dynamic_import, member_call, member_prop, promise_all, require_ensure,
+};
 use crate::compiler::Context;
 use crate::generate::chunk::ChunkId;
 use crate::visitors::dep_replacer::DependenciesToReplace;
@@ -137,13 +139,27 @@ impl<'a> VisitMut for DynamicImport<'a> {
                             })),
                         });
 
-                        let require_call = member_expr!(DUMMY_SP, __mako_require__.dr).as_call(
+                        let require_call = member_call(
+                            Expr::Ident(id("__mako_require__")),
+                            member_prop("bind"),
+                            vec![
+                                ExprOrSpread {
+                                    spread: None,
+                                    expr: Box::new(Expr::Ident(id("__mako_require__"))),
+                                },
+                                ExprOrSpread {
+                                    spread: None,
+                                    expr: Box::new(Expr::Lit(Lit::Str(resolved_source.into()))),
+                                },
+                            ],
+                        );
+                        let dr_call = member_expr!(DUMMY_SP, __mako_require__.dr).as_call(
                             DUMMY_SP,
                             vec![
                                 self.interop.clone().as_arg(),
                                 ExprOrSpread {
                                     spread: None,
-                                    expr: Box::new(Expr::Lit(Lit::Str(resolved_source.into()))),
+                                    expr: Box::new(require_call),
                                 },
                             ],
                         );
@@ -153,7 +169,7 @@ impl<'a> VisitMut for DynamicImport<'a> {
                             member_prop("then"),
                             vec![ExprOrSpread {
                                 spread: None,
-                                expr: require_call.into(),
+                                expr: dr_call.into(),
                             }],
                         )
                     };
@@ -185,7 +201,7 @@ mod tests {
 var interop = __mako_require__("hashed_helper")._;
 Promise.all([
     __mako_require__.ensure("foo")
-]).then(__mako_require__.dr(interop, "foo"));
+]).then(__mako_require__.dr(interop, __mako_require__.bind(__mako_require__, "foo")));
             "#
             .trim()
         );

diff --git a/crates/mako/templates/app_runtime.stpl b/crates/mako/templates/app_runtime.stpl
@@ -58,7 +58,7 @@ function createRuntime(makoModules, entryModuleId, global) {
         get: all[name],
       });
   };
-<% if concatenate_enabled { %>  
+<% if concatenate_enabled { %>
   // Export Star util for concatenated modules
   requireModule.es = function(to, from) {
     Object.keys(from).forEach(function(k) {
@@ -72,15 +72,15 @@ function createRuntime(makoModules, entryModuleId, global) {
   };
 <% } %>
   requireModule.d = Object.defineProperty.bind(Object);
-  
+
   !(function(){
     function isPromise(obj) {
       return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
     }
-  
-    requireModule.dr = function(interop, request) {
+
+    requireModule.dr = function(interop, mr) {
       return function(){
-        var m = requireModule(request);
+        var m = mr();
         if(isPromise(m)){
           return m.then(function(rm){ return interop(rm)})
         }

diff --git a/e2e/fixtures/javascript.require-dynamic/expect.js b/e2e/fixtures/javascript.require-dynamic/expect.js
@@ -58,7 +58,7 @@ assert.match(
 
 assert.match(
   asyncContent,
-  moduleReg("src/i18n\\?context&glob=\\*\\*/\\*.json&async", "'./zh-CN.json': ()=>Promise.all([\n.*__mako_require__.ensure(\"src/i18n/zh-CN.json\")\n.*]).then(__mako_require__.dr(interop, \"src/i18n/zh-CN.json\"))", true),
+  moduleReg("src/i18n\\?context&glob=\\*\\*/\\*.json&async", "'./zh-CN.json': ()=>Promise.all([\n.*__mako_require__.ensure(\"src/i18n/zh-CN.json\")\n.*]).then(__mako_require__.dr(interop, __mako_require__.bind(__mako_require__, \"src/i18n/zh-CN.json\")))", true),
   "should generate context module with correct map in async chunk",
 );
 
@@ -70,7 +70,7 @@ assert.match(
 
 assert.match(
   asyncContent,
-  moduleReg("src/i18n\\?context&glob=\\*\\*/\\*.json&async", "'./en-US.json': ()=>Promise.all([\n.*__mako_require__.ensure(\"src/i18n/en-US.json\")\n.*]).then(__mako_require__.dr(interop, \"src/i18n/en-US.json\"))", true),
+  moduleReg("src/i18n\\?context&glob=\\*\\*/\\*.json&async", "'./en-US.json': ()=>Promise.all([\n.*__mako_require__.ensure(\"src/i18n/en-US.json\")\n.*]).then(__mako_require__.dr(interop, __mako_require__.bind(__mako_require__, \"src/i18n/en-US.json\")))", true),
   "should generate context module with correct map in async chunk",
 );
 

diff --git a/e2e/fixtures/runtime.dynamic_import_interop/expect.js b/e2e/fixtures/runtime.dynamic_import_interop/expect.js
@@ -13,4 +13,4 @@ const index = files["index.js"];
 expect(index).toContain(
   'var interop = __mako_require__("@swc/helpers/_/_interop_require_wildcard")._;',
 );
-expect(index).toContain('then(__mako_require__.dr(interop, "src/cjs.js"))');
+expect(index).toContain('then(__mako_require__.dr(interop, __mako_require__.bind(__mako_require__, "src/cjs.js")))');
diff --git a/examples/with-umi/package.json b/examples/with-umi/package.json
@@ -11,6 +11,6 @@
 		"@umijs/plugins": "^4.0.70",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"umi": "^4.0.70"
+		"umi": "~4.2.0"
 	}
 }
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "react-refresh": "^0.14.0",
     "semver": "^7.5.4",
     "typescript": "^5.4.3",
+    "umi": "~4.2.0",
     "wait-port": "^1.1.0",
     "webpack": "^5.0.0",
     "zx": "^7.2.3"