fix(next/dynamic): handle template literal import path (#39623)

## Bug

- [x] fixes #39522 
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

packages/next-swc/crates/core/src/next_dynamic.rs

@@ -7,7 +7,7 @@ use swc_common::{FileName, DUMMY_SP};
 use swc_ecmascript::ast::{
     ArrayLit, ArrowExpr, BinExpr, BinaryOp, BlockStmtOrExpr, Bool, CallExpr, Callee, Expr,
     ExprOrSpread, Id, Ident, ImportDecl, ImportSpecifier, KeyValueProp, Lit, MemberExpr,
-    MemberProp, Null, ObjectLit, Prop, PropName, PropOrSpread, Str,
+    MemberProp, Null, ObjectLit, Prop, PropName, PropOrSpread, Str, Tpl,
 };
 use swc_ecmascript::utils::ExprFactory;
 use swc_ecmascript::visit::{Fold, FoldWith};
@@ -61,8 +61,14 @@ impl Fold for NextDynamicPatcher {
     fn fold_call_expr(&mut self, expr: CallExpr) -> CallExpr {
         if self.is_next_dynamic_first_arg {
             if let Callee::Import(..) = &expr.callee {
-                if let Expr::Lit(Lit::Str(Str { value, .. })) = &*expr.args[0].expr {
-                    self.dynamically_imported_specifier = Some(value.to_string());
+                match &*expr.args[0].expr {
+                    Expr::Lit(Lit::Str(Str { value, .. })) => {
+                        self.dynamically_imported_specifier = Some(value.to_string());
+                    }
+                    Expr::Tpl(Tpl { exprs, quasis, .. }) if exprs.is_empty() => {
+                        self.dynamically_imported_specifier = Some(quasis[0].raw.to_string());
+                    }
+                    _ => {}
                 }
             }
             return expr.fold_children_with(self);

packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/input.js

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(() => import(`../components/hello`))
+
+const componentRoot = '@/some-components'
+const Component1 = dynamic(() => import(`${componentRoot}/component1`));
+const Component2 = dynamic(() => import(`${componentRoot}/component2`));

packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-dev.js

@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic';
+const DynamicComponent = dynamic(()=>import(`../components/hello`), {
+    loadableGenerated: {
+        modules: [
+            "some-file.js -> " + "../components/hello"
+        ]
+    }
+});
+const componentRoot = '@/some-components';
+const Component1 = dynamic(()=>import(`${componentRoot}/component1`));
+const Component2 = dynamic(()=>import(`${componentRoot}/component2`));

packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-prod.js

@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic';
+const DynamicComponent = dynamic(()=>import(`../components/hello`), {
+    loadableGenerated: {
+        webpack: ()=>[
+                require.resolveWeak("../components/hello")
+            ]
+    }
+});
+const componentRoot = '@/some-components';
+const Component1 = dynamic(()=>import(`${componentRoot}/component1`));
+const Component2 = dynamic(()=>import(`${componentRoot}/component2`));

packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-server.js

@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic';
+const DynamicComponent = dynamic(()=>import(`../components/hello`), {
+    loadableGenerated: {
+        modules: [
+            "some-file.js -> " + "../components/hello"
+        ]
+    }
+});
+const componentRoot = '@/some-components';
+const Component1 = dynamic(()=>import(`${componentRoot}/component1`));
+const Component2 = dynamic(()=>import(`${componentRoot}/component2`));