diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index f38083b00d1b..ca0b4c5111b3 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -208,7 +208,6 @@ function renderPageTree( isServerComponent: boolean ) { const { router: _, ...rest } = props - if (isServerComponent) { return ( @@ -400,7 +399,7 @@ const useFlightResponse = createFlightHook() // Create the wrapper component for a Flight stream. function createServerComponentRenderer( App: any, - ComponentMod: any, + Component: any, { cachePrefix, inlinedTransformStream, @@ -413,12 +412,6 @@ function createServerComponentRenderer( serverComponentManifest: NonNullable } ) { - // We need to expose the `__webpack_require__` API globally for - // react-server-dom-webpack. This is a hack until we find a better way. - // @ts-ignore - globalThis.__webpack_require__ = ComponentMod.__next_rsc__.__webpack_require__ - const Component = interopDefault(ComponentMod) - function ServerComponentWrapper({ router, ...props }: any) { const id = (React as any).useId() @@ -527,7 +520,13 @@ export async function renderToHTML( if (isServerComponent) { serverComponentsInlinedTransformStream = new TransformStream() const search = urlQueryToSearchParams(query).toString() - Component = createServerComponentRenderer(App, ComponentMod, { + // We need to expose the `__webpack_require__` API globally for + // react-server-dom-webpack. This is a hack until we find a better way. + // @ts-ignore + globalThis.__webpack_require__ = + ComponentMod.__next_rsc__.__webpack_require__ + + Component = createServerComponentRenderer(App, Component, { cachePrefix: pathname + (search ? `?${search}` : ''), inlinedTransformStream: serverComponentsInlinedTransformStream, staticTransformStream: serverComponentsPageDataTransformStream, @@ -1257,7 +1256,7 @@ export async function renderToHTML( ...props.pageProps, ...serverComponentProps, }, - isServerComponent + true ), serverComponentManifest ).pipeThrough(createBufferedTransformStream()) @@ -1425,7 +1424,8 @@ export async function renderToHTML( {renderPageTree( - EnhancedApp, + // AppServer is included in the EnhancedComponent in ServerComponentWrapper + isServerComponent ? React.Fragment : EnhancedApp, EnhancedComponent, { ...(isServerComponent ? props.pageProps : props), router }, isServerComponent diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js new file mode 100644 index 000000000000..57b0da821094 --- /dev/null +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js @@ -0,0 +1,7 @@ +export default function App({ Component, pageProps }) { + return ( +
+ +
+ ) +} diff --git a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js index eec271208a27..a3e1f7b2c1ec 100644 --- a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js +++ b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js @@ -38,12 +38,16 @@ async function testRoute(appPort, url, { isStatic, isEdge, isRSC }) { // Should be re-rendered. expect(renderedAt1).toBeLessThan(renderedAt2) } - const customAppServerHtml = '
{