Repository: react
Issue: [React 19] Internal error: TypeError: Invalid state: ReadableStream is already closed
Labels: React 19

## Summary

When I declared a component as an async function and used React.use() to retrieve the parameter of a dynamic route within it, I received following error:

⨯ Internal error: TypeError: Invalid state: ReadableStream is already closed
    at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
    at new NodeError (node:internal/errors:405:5)
    at ReadableByteStreamController.enqueue (node:internal/webstreams/readablestream:1151:13)
    at flushCompletedChunks (/home/emu/data/development/private/react/Session9/nextrouter-blog-app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:114:57155)
    at performWork (/home/emu/data/development/private/react/Session9/nextrouter-blog-app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:114:55822)
    at Immediate._onImmediate (/home/emu/data/development/private/react/Session9/nextrouter-blog-app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:114:21159)
    at process.processImmediate (node:internal/timers:478:21)
    at process.callbackTrampoline (node:internal/async_hooks:128:17)
digest: "1841623159"
 GET /pages/post/1 200 in 1206ms
 ⨯ next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (291:15) @ Error
 ⨯ Error: Expected a suspended thenable. This is a bug in React. Please file an issue.
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "3140543578"
  289 |     function getSuspendedThenable() {
  290 |       if (null === suspendedThenable)
> 291 |         throw Error(
      |               ^
  292 |           "Expected a suspended thenable. This is a bug in React. Please file an issue."
  293 |         );
  294 |       var thenable = suspendedThenable;
 ⨯ next/dist/src/server/pipe-readable.ts (144:11) @ pipeToNodeResponse
 ⨯ Error: failed to pipe response
    at pipeToNodeResponse (webpack://next/dist/src/server/pipe-readable.ts:144:10)
    at async FlightRenderResult.pipeToNodeResponse (webpack://next/dist/src/server/render-result.ts:291:4)
    at async sendRenderResult (node_modules/next/src/server/send-payload.ts:110:2)
    at async DevServer.pipeImpl (node_modules/next/src/server/base-server.ts:1715:6)
    at async NextNodeServer.handleCatchallRenderRequest (node_modules/next/src/server/next-server.ts:1034:6)
    at async DevServer.handleRequestImpl (node_modules/next/src/server/base-server.ts:1462:8)
    at async (node_modules/next/src/server/dev/next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (node_modules/next/src/trace/trace.ts:143:13)
    at async DevServer.handleRequest (node_modules/next/src/server/dev/next-dev-server.ts:512:19)
    at async invokeRender (node_modules/next/src/server/lib/router-server.ts:284:10)
    at async handleRequest (node_modules/next/src/server/lib/router-server.ts:530:15)
    at async requestHandlerImpl (node_modules/next/src/server/lib/router-server.ts:576:6)
    at async Server.requestListener (node_modules/next/src/server/lib/start-server.ts:146:6)
  142 |     if (isAbortError(err)) return
  143 |
> 144 |     throw new Error('failed to pipe response', { cause: err })
      |          ^
  145 |   }
  146 | }
  147 | {
  [cause]: Error: Expected a suspended thenable. This is a bug in React. Please file an issue.
      at Error (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:291:14)
      at getSuspendedThenable (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:2271:18)
      at retryTask (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:2313:10)
      at performWork (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1160:21) {
    digest: '3140543578'
  }
}
  142 |     if (isAbortError(err)) return
  143 |
> 144 |     throw new Error('failed to pipe response', { cause: err })
      |           ^
  145 |   }
  146 | }
  147 |
 GET /pages/post/1 500 in 856ms
 ⨯ next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (291:15) @ Error
 ⨯ Error: Expected a suspended thenable. This is a bug in React. Please file an issue.
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "3140543578"
  289 |     function getSuspendedThenable() {
  290 |       if (null === suspendedThenable)
> 291 |         throw Error(
      |               ^
  292 |           "Expected a suspended thenable. This is a bug in React. Please file an issue."
  293 |         );
  294 |       var thenable = suspendedThenable;
 ⨯ next/dist/src/server/pipe-readable.ts (144:11) @ pipeToNodeResponse
 ⨯ Error: failed to pipe response
    at pipeToNodeResponse (webpack://next/dist/src/server/pipe-readable.ts:144:10)
    at async render_result_RenderResult.pipeToNodeResponse (webpack://next/dist/src/server/render-result.ts:291:4)
    at async sendRenderResult (node_modules/next/src/server/send-payload.ts:110:2)
    at async DevServer.pipeImpl (node_modules/next/src/server/base-server.ts:1715:6)
    at async NextNodeServer.handleCatchallRenderRequest (node_modules/next/src/server/next-server.ts:1034:6)
    at async DevServer.handleRequestImpl (node_modules/next/src/server/base-server.ts:1462:8)
    at async (node_modules/next/src/server/dev/next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (node_modules/next/src/trace/trace.ts:143:13)
    at async DevServer.handleRequest (node_modules/next/src/server/dev/next-dev-server.ts:512:19)
    at async invokeRender (node_modules/next/src/server/lib/router-server.ts:284:10)
    at async handleRequest (node_modules/next/src/server/lib/router-server.ts:530:15)
    at async requestHandlerImpl (node_modules/next/src/server/lib/router-server.ts:576:6)
    at async Server.requestListener (node_modules/next/src/server/lib/start-server.ts:146:6)
  142 |     if (isAbortError(err)) return
  143 |
> 144 |     throw new Error('failed to pipe response', { cause: err })
      |          ^
  145 |   }
  146 | }
  147 | {
  [cause]: Error: Expected a suspended thenable. This is a bug in React. Please file an issue.
      at Error (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:291:14)
      at getSuspendedThenable (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:2271:18)
      at retryTask (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:2313:10)
      at performWork (webpack://next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1160:21) {
    digest: '3140543578'
  }
}
  142 |     if (isAbortError(err)) return
  143 |
> 144 |     throw new Error('failed to pipe response', { cause: err })
      |           ^
  145 |   }
  146 | }
  147 |
 ○ Compiling /_error ...
 ✓ Compiled /_error in 1381ms (910 modules)
 
 Find a snippet here:
```
 export default function getPosts() {
    return  [
        { id: "1", title: "Introduction to Next.js", content: "Next.js is a React framework..." },
        { id: "2", title: "Understanding Routing", content: "Routing in Next.js is file-based..." },
        { id: "3", title: "Deploying a Next.js App", content: "You can deploy Next.js on Vercel..." },
    ]
}
 
export default async function Post({ params }) {
    const { id } = React.use(params)
    const posts = getPosts()

    const post = posts.find((post) => post.id === id);

    return post ? (
        <div>
            <Navbar />
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </div>
    ) : <p>Loading...</p>;
}
```