diff --git a/packages/next-swc/crates/core/src/next_dynamic.rs b/packages/next-swc/crates/core/src/next_dynamic.rs index b8c2f7fdd120..7b82bcaef2e3 100644 --- a/packages/next-swc/crates/core/src/next_dynamic.rs +++ b/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); diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/input.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/input.js new file mode 100644 index 000000000000..534a01d415ad --- /dev/null +++ b/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`)); \ No newline at end of file diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-dev.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-dev.js new file mode 100644 index 000000000000..57f30d46f41d --- /dev/null +++ b/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`)); diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-prod.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-prod.js new file mode 100644 index 000000000000..03c318a2ae23 --- /dev/null +++ b/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`)); diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/template-literal/output-server.js new file mode 100644 index 000000000000..57f30d46f41d --- /dev/null +++ b/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`));