From b2ecf43314a72c10d95e0188fa7d19a78d4fc1c5 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 23 Oct 2023 16:59:03 -0700
Subject: [PATCH] fix client components inside mdx

---
 .../src/build/webpack/loaders/next-flight-loader/index.ts    | 4 ++--
 test/e2e/app-dir/mdx/app/client.tsx                          | 5 +++++
 test/e2e/app-dir/mdx/app/page.mdx                            | 4 ++++
 test/e2e/app-dir/mdx/mdx.test.ts                             | 5 +++++
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 test/e2e/app-dir/mdx/app/client.tsx

diff --git a/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts b/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts
index 6a1e7c44b3f1e..de1dd5095d032 100644
--- a/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts
+++ b/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts
@@ -97,14 +97,14 @@ const __default__ = proxy.default;
       let cnt = 0
       for (const ref of clientRefs) {
         if (ref === '') {
-          esmSource += `\nexports[''] = proxy[''];`
+          esmSource += `\nexports[''] = createProxy(String.raw\`${this.resourcePath}#\`);`
         } else if (ref === 'default') {
           esmSource += `
 export { __esModule, $$typeof };
 export default __default__;`
         } else {
           esmSource += `
-const e${cnt} = proxy["${ref}"];
+const e${cnt} = createProxy(String.raw\`${this.resourcePath}#${ref}\`);
 export { e${cnt++} as ${ref} };`
         }
       }
diff --git a/test/e2e/app-dir/mdx/app/client.tsx b/test/e2e/app-dir/mdx/app/client.tsx
new file mode 100644
index 0000000000000..e0708c7350ac1
--- /dev/null
+++ b/test/e2e/app-dir/mdx/app/client.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+export function Client() {
+  return <h2>This is a client component</h2>
+}
diff --git a/test/e2e/app-dir/mdx/app/page.mdx b/test/e2e/app-dir/mdx/app/page.mdx
index 5371f3deebc75..dd2cf23f48ca2 100644
--- a/test/e2e/app-dir/mdx/app/page.mdx
+++ b/test/e2e/app-dir/mdx/app/page.mdx
@@ -1,3 +1,7 @@
 # Hello World
 
 This is MDX!
+
+import { Client } from './client'
+
+<Client />
diff --git a/test/e2e/app-dir/mdx/mdx.test.ts b/test/e2e/app-dir/mdx/mdx.test.ts
index 344fc425d5831..33dc0aea63ca4 100644
--- a/test/e2e/app-dir/mdx/mdx.test.ts
+++ b/test/e2e/app-dir/mdx/mdx.test.ts
@@ -54,6 +54,11 @@ for (const type of [
             'rgb(255, 0, 0)'
           )
         })
+
+        it('should allow importing client components', async () => {
+          const $ = await next.render$('/')
+          expect($('h2').text()).toBe('This is a client component')
+        })
       })
 
       describe('pages directory', () => {