Flight client navigation error (#40861)

When navigating from app to pages, we do a flight render on the server
to generate the redirected path. However due to our new bundling
strategy we can't use the bundled `ComponentMod.renderToReadableStream`
because the component is now a regular component, not a RSC. In that
case we have to import the unbundled flight server.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/server/app-render.tsx

@@ -558,9 +558,6 @@ export async function renderToHTMLOrFlight(
         ? staticGenerationAsyncStorage.getStore()
         : staticGenerationAsyncStorage
 
-    const { CONTEXT_NAMES } =
-      ComponentMod.serverHooks as typeof import('../client/components/hooks-server-context')
-
     // don't modify original query object
     query = Object.assign({}, query)
 
@@ -572,10 +569,17 @@ export async function renderToHTMLOrFlight(
       stripInternalQueries(query)
       const search = stringifyQuery(query)
 
+      // For pages dir, there is only the SSR pass and we don't have the bundled
+      // React subset. Here we directly import the flight renderer with the
+      // unbundled React.
+      // TODO-APP: Is it possible to hard code the flight response here instead of
+      // rendering it?
+      const ReactServerDOMWebpack = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server')
+
       // Empty so that the client-side router will do a full page navigation.
       const flightData: FlightData = pathname + (search ? `?${search}` : '')
       return new FlightRenderResult(
-        ComponentMod.renderToReadableStream(
+        ReactServerDOMWebpack.renderToReadableStream(
           flightData,
           serverComponentManifest,
           {
@@ -585,6 +589,9 @@ export async function renderToHTMLOrFlight(
       )
     }
 
+    const { CONTEXT_NAMES } =
+      ComponentMod.serverHooks as typeof import('../client/components/hooks-server-context')
+
     // TODO-APP: verify the tree is valid
     // TODO-APP: verify query param is single value (not an array)
     // TODO-APP: verify tree can't grow out of control
@@ -1084,6 +1091,8 @@ export async function renderToHTMLOrFlight(
         ).slice(1),
       ]
 
+      // For app dir, use the bundled version of Fizz renderer (renderToReadableStream)
+      // which contains the subset React.
       const readable = ComponentMod.renderToReadableStream(
         flightData,
         serverComponentManifest,