From 97a49c8223967cf04046686b86ded124d6fbc596 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 8 Feb 2022 20:09:47 +0100
Subject: [PATCH] fix: arrow function export in rsc client component (#34105)

The `export default xxx` statement is slightly different from estree when exporting an arrow function instead of identifier in swc.
We also need to capture arrow exports.
---
 .../loaders/next-flight-client-loader.ts        |  1 +
 .../client-default-export-arrow.client.js       |  1 +
 .../app/pages/client-exports-all.server.js      |  1 +
 .../app/pages/client-exports.server.js          | 16 +++++++++++-----
 .../test/rsc.js                                 | 17 ++++++++++++++---
 5 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 test/integration/react-streaming-and-server-components/app/components/client-default-export-arrow.client.js

diff --git a/packages/next/build/webpack/loaders/next-flight-client-loader.ts b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
index 6a916a364e39f..65af111e6dcac 100644
--- a/packages/next/build/webpack/loaders/next-flight-client-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
@@ -62,6 +62,7 @@ async function parseExportNamesInto(
     switch (node.type) {
       // TODO: support export * from module path
       // case 'ExportAllDeclaration':
+      case 'ExportDefaultExpression':
       case 'ExportDefaultDeclaration':
         names.push('default')
         continue
diff --git a/test/integration/react-streaming-and-server-components/app/components/client-default-export-arrow.client.js b/test/integration/react-streaming-and-server-components/app/components/client-default-export-arrow.client.js
new file mode 100644
index 0000000000000..6c17e8cf34c38
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/components/client-default-export-arrow.client.js
@@ -0,0 +1 @@
+export default () => 'client-default-export-arrow'
diff --git a/test/integration/react-streaming-and-server-components/app/pages/client-exports-all.server.js b/test/integration/react-streaming-and-server-components/app/pages/client-exports-all.server.js
index d4a2701141435..f556ef2b4da8d 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/client-exports-all.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/client-exports-all.server.js
@@ -1,6 +1,7 @@
 import * as all from '../components/client-exports-all'
 import * as allClient from '../components/client-exports-all.client'
 
+// TODO: support export all declaration
 export default function Page() {
   const { a, b, c, d, e } = all
   const { a: ac, b: bc, c: cc, d: dc, e: ec } = allClient
diff --git a/test/integration/react-streaming-and-server-components/app/pages/client-exports.server.js b/test/integration/react-streaming-and-server-components/app/pages/client-exports.server.js
index 68bb37e7ee1de..92a2ee87b686e 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/client-exports.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/client-exports.server.js
@@ -1,13 +1,19 @@
 import { a, b, c, d, e } from '../components/client-exports'
+import DefaultArrow from '../components/client-default-export-arrow.client'
 
 export default function Page() {
   return (
     <div>
-      {a}
-      {b}
-      {c}
-      {d}
-      {e[0]}
+      <div id="named-exports">
+        {a}
+        {b}
+        {c}
+        {d}
+        {e[0]}
+      </div>
+      <div id="default-exports-arrow">
+        <DefaultArrow />
+      </div>
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
index 619c37c89b9e0..7fe0bfc227163 100644
--- a/test/integration/react-streaming-and-server-components/test/rsc.js
+++ b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -66,10 +66,21 @@ export default function (context) {
       '/client-exports'
     )
     const $clientExports = cheerio.load(clientExportsHTML)
-    expect($clientExports('div[hidden] > div').text()).toBe('abcde')
+    expect($clientExports('div[hidden] > div > #named-exports').text()).toBe(
+      'abcde'
+    )
+    expect(
+      $clientExports('div[hidden] > div > #default-exports-arrow').text()
+    ).toBe('client-default-export-arrow')
 
     const browser = await webdriver(context.appPort, '/client-exports')
-    const text = await browser.waitForElementByCss('#__next').text()
-    expect(text).toBe('abcde')
+    const textNamedExports = await browser
+      .waitForElementByCss('#named-exports')
+      .text()
+    const textDefaultExportsArrow = await browser
+      .waitForElementByCss('#default-exports-arrow')
+      .text()
+    expect(textNamedExports).toBe('abcde')
+    expect(textDefaultExportsArrow).toBe('client-default-export-arrow')
   })
 }