Revert "Fix esm property def in flight loader (#66990)"

This reverts commit 9bb06c5.

packages/next/src/build/webpack-config.ts

@@ -483,13 +483,6 @@ export default async function getBaseWebpackConfig(
     babel: useSWCLoader ? swcDefaultLoader : babelLoader!,
   }
 
-  const nextFlightLoader = {
-    loader: 'next-flight-loader',
-    options: {
-      isEdgeServer,
-    },
-  }
-
   const appServerLayerLoaders = hasAppDir
     ? [
         // When using Babel, we will have to add the SWC loader
@@ -502,7 +495,6 @@ export default async function getBaseWebpackConfig(
     : []
 
   const instrumentLayerLoaders = [
-    nextFlightLoader,
     // When using Babel, we will have to add the SWC loader
     // as an additional pass to handle RSC correctly.
     // This will cause some performance overhead but
@@ -512,7 +504,6 @@ export default async function getBaseWebpackConfig(
   ].filter(Boolean)
 
   const middlewareLayerLoaders = [
-    nextFlightLoader,
     // When using Babel, we will have to use SWC to do the optimization
     // for middleware to tree shake the unused default optimized imports like "next/server".
     // This will cause some performance overhead but
@@ -1358,7 +1349,9 @@ export default async function getBaseWebpackConfig(
                     isEdgeServer,
                   }),
                 },
-                use: nextFlightLoader,
+                use: {
+                  loader: 'next-flight-loader',
+                },
               },
             ]
           : []),

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

@@ -54,9 +54,6 @@ export default function transformSource(
     throw new Error('Expected source to have been transformed to a string.')
   }
 
-  const options = this.getOptions()
-  const { isEdgeServer } = options
-
   // Assign the RSC meta information to buildInfo.
   // Exclude next internal files which are not marked as client files
   const buildInfo = getModuleBuildInfo(this._module)
@@ -100,31 +97,21 @@ 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.
-
-      // Explanation for: await createProxy(...)
-      // We need to await the module proxy creation because it can be async module for SSR layer
-      // due to having async dependencies.
-      // We only apply `the await` for Node.js as only Edge doesn't have external dependencies.
       let esmSource = `\
 import { createProxy } from "${MODULE_PROXY_PATH}"
-
-const proxy = ${
-        isEdgeServer ? '' : 'await'
-      } createProxy(String.raw\`${resourceKey}\`)
 `
       let cnt = 0
       for (const ref of clientRefs) {
         if (ref === '') {
-          esmSource += `exports[''] = proxy['']\n`
+          esmSource += `\nexports[''] = createProxy(String.raw\`${resourceKey}#\`);`
         } else if (ref === 'default') {
-          esmSource += `export default proxy.default;\n`
+          esmSource += `\
+export default createProxy(String.raw\`${resourceKey}#default\`);
+`
         } else {
-          esmSource += `const e${cnt} = proxy["${ref}"];\n`
-          esmSource += `export { e${cnt++} as ${ref} };\n`
+          esmSource += `
+const e${cnt} = createProxy(String.raw\`${resourceKey}#${ref}\`);
+export { e${cnt++} as ${ref} };`
         }
       }
 

packages/next/src/server/app-render/create-component-tree.tsx

@@ -260,7 +260,7 @@ async function createComponentTreeInternal({
   }
 
   const LayoutOrPage: React.ComponentType<any> | undefined = layoutOrPageMod
-    ? interopDefault(layoutOrPageMod)
+    ? await interopDefault(layoutOrPageMod)
     : undefined
 
   /**

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

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

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 { default: mod.Button }
+    return mod.Button
   })
 )