Fix esm property def in flight loader (#66286)

### What

Remove creating client proxy for each ESM export, instead for ESM we
create a CJS module proxy for itself and access the property with export
name as the actual export.

### Why

`proxy` is the module proxy that we treat the module as a client
boundary.
For ESM, we access the property of the module proxy directly for each
export.
This is bit hacky that treating using a CJS like module proxy for ESM's
exports,
but this will avoid creating nested proxies for each export. It will be
improved in the future.

Notice that for `next/dynamic`, if you're doing a dynamic import of
client component in server component, and trying to access the named
export directly, it will error. Instead you need to align the dynamic
import resolved value wrapping with a `default:` property (e.g. `{
default: resolved }`) like what `React.lazy` accepted.

Revert #57301
Fixes #66212

x-ref:
[slack](https://vercel.slack.com/archives/C04DUD7EB1B/p1716897764858829)

packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

@@ -97,21 +97,24 @@ export default function transformSource(
  return
  }
 
+ // `proxy` is the module proxy that we treat the module as a client boundary.
+ // For ESM, we access the property of the module proxy directly for each export.
+ // This is bit hacky that treating using a CJS like module proxy for ESM's exports,
+ // but this will avoid creating nested proxies for each export. It will be improved in the future.
  let esmSource = `\
 import { createProxy } from "${MODULE_PROXY_PATH}"
+
+const proxy = createProxy(String.raw\`${resourceKey}\`)
 `
  let cnt = 0
  for (const ref of clientRefs) {
  if (ref === '') {
- esmSource += `\nexports[''] = createProxy(String.raw\`${resourceKey}#\`);`
+ esmSource += `exports[''] = proxy['']\n`
  } else if (ref === 'default') {
- esmSource += `\
-export default createProxy(String.raw\`${resourceKey}#default\`);
-`
+ esmSource += `export default createProxy(String.raw\`${resourceKey}#default\`);\n`
  } else {
- esmSource += `
-const e${cnt} = createProxy(String.raw\`${resourceKey}#${ref}\`);
-export { e${cnt++} as ${ref} };`
+ esmSource += `const e${cnt} = proxy["${ref}"];\n`
+ esmSource += `export { e${cnt++} as ${ref} };\n`
  }
  }
 

packages/next/src/shared/lib/lazy-dynamic/loadable.tsx

@@ -15,7 +15,7 @@ function convertModule<P>(
  // Cases:
  // mod: { default: Component }
  // mod: Component
- // mod: { $$typeof, default: proxy(Component) }
+ // mod: { default: proxy(Component) }
  // mod: proxy(Component)
  const hasDefault = mod && 'default' in mod
  return {

test/e2e/app-dir/app-routes-client-component/app-routes-client-component.test.ts

@@ -1,16 +1,14 @@
-import { FileRef, nextTestSetup } from 'e2e-utils'
-import path from 'path'
+import { nextTestSetup } from 'e2e-utils'
 
 describe('referencing a client component in an app route', () => {
  const { next } = nextTestSetup({
- files: new FileRef(path.join(__dirname)),
+ files: __dirname,
  })
 
  it('responds without error', async () => {
  expect(JSON.parse(await next.render('/runtime'))).toEqual({
- // Turbopack's proxy components are functions
- clientComponent: process.env.TURBOPACK ? 'function' : 'object',
- myModuleClientComponent: process.env.TURBOPACK ? 'function' : 'object',
+ clientComponent: 'function',
+ myModuleClientComponent: 'function',
  })
  })
 })

test/e2e/app-dir/dynamic/app/dynamic/named-export/page.js

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 
 const Button = dynamic(() =>
  import('./client').then((mod) => {
- return mod.Button
+ return { default: mod.Button }
  })
 )