Fix client reference proxies

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} };`
         }
       }

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>
+}

test/e2e/app-dir/mdx/app/page.mdx

@@ -1,3 +1,7 @@
 # Hello World
 
 This is MDX!
+
+import { Client } from './client'
+
+<Client />

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', () => {