Fix type errors

packages/next/client/app-index.tsx

@@ -125,7 +125,7 @@ function createResponseCache() {
 }
 const rscCache = createResponseCache()
 
-function useInitialServerResponse(cacheKey: string) {
+function useInitialServerResponse(cacheKey: string): Promise<JSX.Element> {
   const response = rscCache.get(cacheKey)
   if (response) return response
 
@@ -141,7 +141,7 @@ function useInitialServerResponse(cacheKey: string) {
   return newResponse
 }
 
-function ServerRoot({ cacheKey }: { cacheKey: string }) {
+function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element {
   React.useEffect(() => {
     rscCache.delete(cacheKey)
   })
@@ -169,7 +169,7 @@ function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
   return children as React.ReactElement
 }
 
-function RSCComponent(props: any) {
+function RSCComponent(props: any): JSX.Element {
   const cacheKey = getCacheKey()
   return <ServerRoot {...props} cacheKey={cacheKey} />
 }

packages/next/client/components/reducer.ts

@@ -763,7 +763,7 @@ export function reducer(
       }
 
       // Unwrap cache data with `use` to suspend here (in the reducer) until the fetch resolves.
-      const flightData = use(cache.data)
+      const [flightData] = use(cache.data)
 
       // Handle case when navigating to page in `pages` from `app`
       if (typeof flightData === 'string') {
@@ -954,7 +954,7 @@ export function reducer(
           'refetch',
         ])
       }
-      const flightData = use(cache.data)
+      const [flightData] = use(cache.data)
 
       // Handle case when navigating to page in `pages` from `app`
       if (typeof flightData === 'string') {

packages/next/server/app-render.tsx

@@ -137,6 +137,10 @@ function preloadDataFetchingRecord(
   return record
 }
 
+interface FlightResponseRef {
+  current: Promise<JSX.Element> | null
+}
+
 /**
  * Render Flight stream.
  * This is only used for renderToHTML, the Flight response does not need additional wrappers.
@@ -145,19 +149,18 @@ function useFlightResponse(
   writable: WritableStream<Uint8Array>,
   req: ReadableStream<Uint8Array>,
   serverComponentManifest: any,
-  flightResponseRef: {
-    current: ReturnType<typeof createFromReadableStream> | null
-  },
+  flightResponseRef: FlightResponseRef,
   nonce?: string
-) {
-  if (flightResponseRef.current) {
+): Promise<JSX.Element> {
+  if (flightResponseRef.current !== null) {
     return flightResponseRef.current
   }
 
   const [renderStream, forwardStream] = readableStreamTee(req)
-  flightResponseRef.current = createFromReadableStream(renderStream, {
+  const res = createFromReadableStream(renderStream, {
     moduleMap: serverComponentManifest.__ssr_module_mapping__,
   })
+  flightResponseRef.current = res
 
   let bootstrapped = false
   // We only attach CSS chunks to the inlined data.
@@ -195,7 +198,7 @@ function useFlightResponse(
   }
   process()
 
-  return flightResponseRef.current
+  return res
 }
 
 /**
@@ -222,7 +225,7 @@ function createServerComponentRenderer(
     >
   },
   nonce?: string
-) {
+): () => JSX.Element {
   // We need to expose the `__webpack_require__` API globally for
   // react-server-dom-webpack. This is a hack until we find a better way.
   if (ComponentMod.__next_app_webpack_require__ || ComponentMod.__next_rsc__) {
@@ -249,10 +252,10 @@ function createServerComponentRenderer(
     return RSCStream
   }
 
-  const flightResponseRef = { current: null }
+  const flightResponseRef: FlightResponseRef = { current: null }
 
   const writable = transformStream.writable
-  return function ServerComponentWrapper() {
+  return function ServerComponentWrapper(): JSX.Element {
     const reqStream = createRSCStream()
     const response = useFlightResponse(
       writable,