Add back in the module loading indirection to make it work across bundles (runtime + user bundle) on the server

Author: gnoff

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

@@ -1579,12 +1579,10 @@ export default async function getBaseWebpackConfig(
                 layer: WEBPACK_LAYERS.appMetadataRoute,
               },
               {
+                // Ensure that the app page module is in the client layers, this
+                // enables React to work correctly for RSC.
                 layer: WEBPACK_LAYERS.serverSideRendering,
-                test: [
-                  // Ensure that the app page module is in the client layers, this
-                  // enables React to work correctly for RSC.
-                  /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
-                ],
+                test: /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
               },
               {
                 // All app dir layers need to use this configured resolution logic

packages/next/src/client/app-next-dev.ts

@@ -4,10 +4,6 @@ import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
   require('./app-webpack')
-  // It is import that the webpack patch above in ./app-webpack runs before any
-  // react code is loaded. This order dependent loading will ensure that react controls
-  // the filename resolution of flight loaded chunks and will not be intercepted
-  // by the patch above.
   const { hydrate } = require('./app-index')
   hydrate()
 })

packages/next/src/client/app-next.ts

@@ -2,13 +2,9 @@ import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
   // Include app-router and layout-router in the main chunk
-  require('./app-webpack')
-  // It is import that the webpack patch above in ./app-webpack runs before any
-  // react code is loaded. This order dependent loading will ensure that react controls
-  // the filename resolution of flight loaded chunks and will not be intercepted
-  // by the patch above.
   require('next/dist/client/components/app-router')
   require('next/dist/client/components/layout-router')
+  require('./app-webpack')
   const { hydrate } = require('./app-index')
   hydrate()
 })

packages/next/src/client/app-turbopack.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error
+process.env.__NEXT_NEW_LINK_BEHAVIOR = true
+
+export {}

packages/next/src/server/app-render/action-handler.ts

@@ -360,15 +360,13 @@ export async function handleAction({
             }
           }
         } else {
-          // Use react-server-dom-webpack/server.node for decodeReplyFromBusboy and react-server-dom-webpack/server.edge
-          // for decodeAction and decodeReply. We could actually use just server.node for all the action handling because
-          // the but these packages don't actually have any direct platform primitives so either works in this context
+          // Use react-server-dom-webpack/server.node which supports streaming
           const {
+            decodeReply,
             decodeReplyFromBusboy,
             decodeAction,
-            decodeReply,
             decodeFormState,
-          } = ComponentMod
+          } = require(`./react-server.node`)
 
           if (isMultipartAction) {
             if (isFetchAction) {

packages/next/src/server/app-render/create-server-components-renderer.tsx

@@ -13,7 +13,10 @@ export function createServerComponentRenderer<Props>(
   ComponentToRender: (props: Props) => any,
   ComponentMod: {
     renderToReadableStream: any
-    createFromReadableStream: any
+    __next_app__?: {
+      require: any
+      loadChunk: any
+    }
   },
   {
     inlinedDataTransformStream,

packages/next/src/server/app-render/entry-base.ts

@@ -6,13 +6,6 @@ const {
   // eslint-disable-next-line import/no-extraneous-dependencies
 } = require('react-server-dom-webpack/server.edge')
 
-let decodeReplyFromBusboy
-if (process.env.NEXT_RUNTIME !== 'edge') {
-  decodeReplyFromBusboy =
-    // eslint-disable-next-line import/no-extraneous-dependencies
-    require('react-server-dom-webpack/server.node').decodeReplyFromBusboy
-}
-
 import AppRouter from '../../client/components/app-router'
 import LayoutRouter from '../../client/components/layout-router'
 import RenderFromTemplateContext from '../../client/components/render-from-template-context'
@@ -47,7 +40,6 @@ export {
   decodeReply,
   decodeAction,
   decodeFormState,
-  decodeReplyFromBusboy,
   preloadStyle,
   preloadFont,
   preconnect,

packages/next/src/server/app-render/react-server.node.ts

@@ -0,0 +1,9 @@
+// This file should be opted into the react-server layer
+
+export {
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeAction,
+  decodeFormState,
+  // eslint-disable-next-line import/no-extraneous-dependencies
+} from 'react-server-dom-webpack/server.node'

packages/next/src/server/app-render/use-flight-response.tsx

@@ -25,9 +25,16 @@ export function useFlightResponse(
     return flightResponseRef.current
   }
   // react-server-dom-webpack/client.edge must not be hoisted for require cache clearing to work correctly
-  const {
-    createFromReadableStream,
-  } = require(`react-server-dom-webpack/client.edge`)
+  let createFromReadableStream
+  if (process.env.TURBOPACK) {
+    createFromReadableStream =
+      // eslint-disable-next-line import/no-extraneous-dependencies
+      require('react-server-dom-turbopack/client.edge').createFromReadableStream
+  } else {
+    createFromReadableStream =
+      // eslint-disable-next-line import/no-extraneous-dependencies
+      require('react-server-dom-webpack/client.edge').createFromReadableStream
+  }
 
   const [renderStream, forwardStream] = flightStream.tee()
   const res = createFromReadableStream(renderStream, {

packages/next/webpack.config.js

@@ -195,6 +195,10 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
     },
     module: {
       rules: [
+        {
+          include: /[\\/]react-server.node/,
+          layer: 'react-server',
+        },
         {
           include: /vendored[\\/]rsc[\\/]entrypoints/,
           resolve: {

test/e2e/app-dir/chunk-loading/app/account/ClientShared.tsx

@@ -2,7 +2,6 @@
 
 import { SuperShared } from '../../components/SuperShared'
 import { LazyShared } from '../../components/LazyShared'
-import 'client-only'
 
 export function ClientShared() {
   return <SuperShared from="fizz" />

test/e2e/app-dir/chunk-loading/app/account/page.js

@@ -1,5 +1,4 @@
 import { ClientShared, ClientDynamicShared } from './ClientShared'
-import 'server-only'
 
 import styles from './styles.module.css'