drop dynamic import with ssr: false on server-side (#32606)

vercel · Jan 11, 2022 · 9836429 · 9836429
1 parent 600f113
commit 9836429
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 3 deletions.
diff --git a/packages/next-swc/crates/core/src/next_dynamic.rs b/packages/next-swc/crates/core/src/next_dynamic.rs
@@ -4,10 +4,11 @@ use pathdiff::diff_paths;
 use swc_atoms::js_word;
 use swc_common::{FileName, DUMMY_SP};
 use swc_ecmascript::ast::{
-    ArrayLit, ArrowExpr, BinExpr, BinaryOp, BlockStmtOrExpr, CallExpr, Expr, ExprOrSpread,
-    ExprOrSuper, Ident, ImportDecl, ImportSpecifier, KeyValueProp, Lit, MemberExpr, ObjectLit,
-    Prop, PropName, PropOrSpread, Str, StrKind,
+    ArrayLit, ArrowExpr, BinExpr, BinaryOp, BlockStmtOrExpr, Bool, CallExpr, Expr, ExprOrSpread,
+    ExprOrSuper, Ident, ImportDecl, ImportSpecifier, KeyValueProp, Lit, MemberExpr, Null,
+    ObjectLit, Prop, PropName, PropOrSpread, Str, StrKind,
 };
+use swc_ecmascript::utils::ExprFactory;
 use swc_ecmascript::utils::{
     ident::{Id, IdentLike},
     HANDLER,
@@ -236,16 +237,52 @@ impl Fold for NextDynamicPatcher {
                             value: generated,
                         })))];
 
+                    let mut has_ssr_false = false;
+
                     if expr.args.len() == 2 {
                         if let Expr::Object(ObjectLit {
                             props: options_props,
                             ..
                         }) = &*expr.args[1].expr
                         {
+                            for prop in options_props.iter() {
+                                if let Some(KeyValueProp { key, value }) = match prop {
+                                    PropOrSpread::Prop(prop) => match &**prop {
+                                        Prop::KeyValue(key_value_prop) => Some(key_value_prop),
+                                        _ => None,
+                                    },
+                                    _ => None,
+                                } {
+                                    if let Some(Ident {
+                                        sym,
+                                        span: _,
+                                        optional: _,
+                                    }) = match key {
+                                        PropName::Ident(ident) => Some(ident),
+                                        _ => None,
+                                    } {
+                                        if sym == "ssr" {
+                                            if let Some(Lit::Bool(Bool {
+                                                value: false,
+                                                span: _,
+                                            })) = match &**value {
+                                                Expr::Lit(lit) => Some(lit),
+                                                _ => None,
+                                            } {
+                                                has_ssr_false = true
+                                            }
+                                        }
+                                    }
+                                }
+                            }
                             props.extend(options_props.iter().cloned());
                         }
                     }
 
+                    if has_ssr_false && self.is_server {
+                        expr.args[0] = Lit::Null(Null { span: DUMMY_SP }).as_arg();
+                    }
+
                     let second_arg = ExprOrSpread {
                         spread: None,
                         expr: Box::new(Expr::Object(ObjectLit {

diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs
@@ -34,6 +34,7 @@ fn amp_attributes_fixture(input: PathBuf) {
 fn next_dynamic_fixture(input: PathBuf) {
     let output_dev = input.parent().unwrap().join("output-dev.js");
     let output_prod = input.parent().unwrap().join("output-prod.js");
+    let output_server = input.parent().unwrap().join("output-server.js");
     test_fixture(
         syntax(),
         &|_tr| {
@@ -60,6 +61,19 @@ fn next_dynamic_fixture(input: PathBuf) {
         &input,
         &output_prod,
     );
+    test_fixture(
+        syntax(),
+        &|_tr| {
+            next_dynamic(
+                false,
+                true,
+                FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                Some("/some-project/src".into()),
+            )
+        },
+        &input,
+        &output_server,
+    );
 }
 
 #[fixture("tests/fixture/ssg/**/input.js")]

diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/duplicated-imports/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/duplicated-imports/output-server.js
@@ -0,0 +1,12 @@
+import dynamic1 from 'next/dynamic'
+import dynamic2 from 'next/dynamic'
+const DynamicComponent1 = dynamic1(() => import('../components/hello1'), {
+  loadableGenerated: {
+    modules: ['some-file.js -> ' + '../components/hello1'],
+  },
+})
+const DynamicComponent2 = dynamic2(() => import('../components/hello2'), {
+  loadableGenerated: {
+    modules: ['some-file.js -> ' + '../components/hello2'],
+  },
+})
diff --git a/...es/next-swc/crates/core/tests/fixture/next-dynamic/member-with-same-name/output-server.js b/...es/next-swc/crates/core/tests/fixture/next-dynamic/member-with-same-name/output-server.js
@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic'
+import somethingElse from 'something-else'
+const DynamicComponent = dynamic(() => import('../components/hello'), {
+  loadableGenerated: {
+    modules: ['some-file.js -> ' + '../components/hello'],
+  },
+})
+somethingElse.dynamic('should not be transformed')
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/no-options/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/no-options/output-server.js
@@ -0,0 +1,6 @@
+import dynamic from 'next/dynamic'
+const DynamicComponent = dynamic(() => import('../components/hello'), {
+  loadableGenerated: {
+    modules: ['some-file.js -> ' + '../components/hello'],
+  },
+})
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/input.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/input.js
@@ -4,3 +4,8 @@ const DynamicComponentWithCustomLoading = dynamic(
   () => import('../components/hello'),
   { loading: () => <p>...</p> }
 )
+
+const DynamicClientOnlyComponent = dynamic(
+  () => import('../components/hello'),
+  { ssr: false }
+)
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-dev.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-dev.js
@@ -8,3 +8,12 @@ const DynamicComponentWithCustomLoading = dynamic(()=>import("../components/hell
     },
     loading: ()=><p >...</p>
 });
+const DynamicClientOnlyComponent = dynamic(()=>import("../components/hello")
+, {
+    loadableGenerated: {
+        modules: [
+            "some-file.js -> " + "../components/hello"
+        ]
+    },
+    ssr: false
+});
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-prod.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-prod.js
@@ -8,3 +8,12 @@ const DynamicComponentWithCustomLoading = dynamic(()=>import("../components/hell
     },
     loading: ()=><p >...</p>
 });
+const DynamicClientOnlyComponent = dynamic(()=>import("../components/hello")
+, {
+    loadableGenerated: {
+        webpack: ()=>[
+                require.resolveWeak("../components/hello")
+            ]
+    },
+    ssr: false
+});
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-server.js
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic'
+const DynamicComponentWithCustomLoading = dynamic(
+  () => import('../components/hello'),
+  {
+    loadableGenerated: {
+      modules: ['some-file.js -> ' + '../components/hello'],
+    },
+    loading: () => <p>...</p>,
+  }
+)
+const DynamicClientOnlyComponent = dynamic(null, {
+  loadableGenerated: {
+    modules: ['some-file.js -> ' + '../components/hello'],
+  },
+  ssr: false,
+})
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/wrapped-import/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/wrapped-import/output-server.js
@@ -0,0 +1,11 @@
+import dynamic from "next/dynamic";
+const DynamicComponent = dynamic(null, {
+    loadableGenerated: {
+        modules: [
+            "some-file.js -> " + "./components/hello"
+        ]
+    },
+    loading: ()=>null
+    ,
+    ssr: false
+});